0
私は、three.jsでコーディングして遊ぶことを学びます。以前から私はthree.jsでインタラクティブなジオメトリを作成する方法を探していました。だから私は（それはスニペット内のリンクを開くことはありません、私は理由を知りませんが、それは動作します）これを見つける：three.jsを使用してクリック可能なパーティクルシステムを作成する
\t \t var container, stats;
\t \t var camera, scene, projector, renderer;
\t \t var particleMaterial;
\t \t var objects = [];
\t \t init();
\t \t animate();
\t \t function init() {
\t \t container = document.createElement('div');
\t \t document.body.appendChild(container);
\t \t
\t \t camera = new THREE.PerspectiveCamera(70, window.innerWidth/window.innerHeight, 1, 10000);
\t \t camera.position.set(0, 300, 500);
\t \t scene = new THREE.Scene();
\t \t
\t \t var geometry = new THREE.CubeGeometry(100, 100, 100);
\t \t
\t \t for (var i = 0; i < 4; i++) {
\t \t var object = new THREE.Mesh(geometry, new THREE.MeshBasicMaterial({
\t color: Math.random() * 0xffffff,
\t opacity: 0.5
\t }));
\t
\t object.position.x = i;
\t object.position.y = i * 10 + i * 100;
\t object.position.z = i;
\t scene.add(object);
\t switch (i) {
\t case 0:
\t object.userData = {
\t URL: "http://google.com"
\t };
break;
\t case 1:
\t object.userData = {
URL: "http://yahoo.com"
};
break;
\t case 2:
\t object.userData = {
URL: "http://msn.com"
};
break;
\t case 3:
\t object.userData = {
URL: "http://engadget.com"
};
break;
\t case 4:
\t object.userData = {
URL: "http://stackoverflow.com"
};
break;
}
scene.add(object);
objects.push(object);
}
projector = new THREE.Projector();
renderer = new THREE.CanvasRenderer();
renderer.setClearColor(0xfffff, 0);
renderer.setSize(window.innerWidth, window.innerHeight);
container.appendChild(renderer.domElement);
document.addEventListener('mousedown', onDocumentMouseDown, false);
//
window.addEventListener('resize', onWindowResize, false);
\t }
function onWindowResize() {
camera.aspect = window.innerWidth/window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
function onDocumentMouseDown(event) {
event.preventDefault();
var vector = new THREE.Vector3((event.clientX/window.innerWidth) * 2 - 1, -(event.clientY/window.innerHeight) * 2 + 1, 0.5);
projector.unprojectVector(vector, camera);
var raycaster = new THREE.Raycaster(camera.position, vector.sub(camera.position).normalize());
var intersects = raycaster.intersectObjects(objects);
if (intersects.length > 0) {
window.open(intersects[0].object.userData.URL);
}
}
function animate() {
requestAnimationFrame(animate);
render();
}
function render() {
renderer.render(scene, camera);
}\t \t <style>
\t \t \t body {
\t \t \t \t font-family: Monospace;
\t \t \t \t background-color: #ffffff;
\t \t \t \t margin: 0px;
\t \t \t \t overflow: hidden;
\t \t \t }
\t \t </style><script src="http://threejs.org/build/three.min.js"></script>
<script src="http://threejs.org/examples/js/renderers/Projector.js"></script>
<script src="http://threejs.org/examples/js/renderers/CanvasRenderer.js"></script>その後、私は実験を続行し、それが困難にしたかったです。だから私はこれを作ってみたかったのですが、パーティクルを使ってキューブを使用しました。私はsteticallyこのThree.jsのデモからインスピレーションを得ています：
var mouseX = 0, mouseY = 0,
\t \t \t windowHalfX = window.innerWidth/2,
\t \t \t windowHalfY = window.innerHeight/2,
\t \t \t SEPARATION = 200,
\t \t \t AMOUNTX = 10,
\t \t \t AMOUNTY = 10,
\t \t \t camera, scene, renderer;
\t \t \t init();
\t \t \t animate();
\t \t \t function init() {
\t \t \t \t var container, separation = 100, amountX = 50, amountY = 50,
\t \t \t \t particles, particle;
\t \t \t \t container = document.createElement('div');
\t \t \t \t document.body.appendChild(container);
\t \t \t \t camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 1, 10000);
\t \t \t \t camera.position.z = 100;
\t \t \t \t scene = new THREE.Scene();
\t \t \t \t renderer = new THREE.CanvasRenderer();
\t \t \t \t renderer.setPixelRatio(window.devicePixelRatio);
\t \t \t \t renderer.setSize(window.innerWidth, window.innerHeight);
\t \t \t \t container.appendChild(renderer.domElement);
\t \t \t \t // particles
\t \t \t \t var PI2 = Math.PI * 2;
\t \t \t \t var material = new THREE.SpriteCanvasMaterial({
\t \t \t \t \t color: 0xffffff,
\t \t \t \t \t program: function (context) {
\t \t \t \t \t \t context.beginPath();
\t \t \t \t \t \t context.arc(0, 0, 0.5, 0, PI2, true);
\t \t \t \t \t \t context.fill();
\t \t \t \t \t }
\t \t \t \t });
\t \t \t \t var geometry = new THREE.Geometry();
\t \t \t \t for (var i = 0; i < 100; i ++) {
\t \t \t \t \t particle = new THREE.Sprite(material);
\t \t \t \t \t particle.position.x = Math.random() * 2 - 1;
\t \t \t \t \t particle.position.y = Math.random() * 2 - 1;
\t \t \t \t \t particle.position.z = Math.random() * 2 - 1;
\t \t \t \t \t particle.position.normalize();
\t \t \t \t \t particle.position.multiplyScalar(Math.random() * 10 + 450);
\t \t \t \t \t particle.scale.x = particle.scale.y = 10;
\t \t \t \t \t scene.add(particle);
\t \t \t \t \t geometry.vertices.push(particle.position);
\t \t \t \t }
\t \t \t \t // lines
\t \t \t \t var line = new THREE.Line(geometry, new THREE.LineBasicMaterial({ color: 0xffffff, opacity: 0.5 }));
\t \t \t \t scene.add(line);
\t \t \t \t document.addEventListener('mousemove', onDocumentMouseMove, false);
\t \t \t \t document.addEventListener('touchstart', onDocumentTouchStart, false);
\t \t \t \t document.addEventListener('touchmove', onDocumentTouchMove, false);
\t \t \t \t //
\t \t \t \t window.addEventListener('resize', onWindowResize, false);
\t \t \t }
\t \t \t function onWindowResize() {
\t \t \t \t windowHalfX = window.innerWidth/2;
\t \t \t \t windowHalfY = window.innerHeight/2;
\t \t \t \t camera.aspect = window.innerWidth/window.innerHeight;
\t \t \t \t camera.updateProjectionMatrix();
\t \t \t \t renderer.setSize(window.innerWidth, window.innerHeight);
\t \t \t }
\t \t \t //
\t \t \t function onDocumentMouseMove(event) {
\t \t \t \t mouseX = event.clientX - windowHalfX;
\t \t \t \t mouseY = event.clientY - windowHalfY;
\t \t \t }
\t \t \t function onDocumentTouchStart(event) {
\t \t \t \t if (event.touches.length > 1) {
\t \t \t \t \t event.preventDefault();
\t \t \t \t \t mouseX = event.touches[ 0 ].pageX - windowHalfX;
\t \t \t \t \t mouseY = event.touches[ 0 ].pageY - windowHalfY;
\t \t \t \t }
\t \t \t }
\t \t \t function onDocumentTouchMove(event) {
\t \t \t \t if (event.touches.length == 1) {
\t \t \t \t \t event.preventDefault();
\t \t \t \t \t mouseX = event.touches[ 0 ].pageX - windowHalfX;
\t \t \t \t \t mouseY = event.touches[ 0 ].pageY - windowHalfY;
\t \t \t \t }
\t \t \t }
\t \t \t //
\t \t \t function animate() {
\t \t \t \t requestAnimationFrame(animate);
\t \t \t \t render();
\t \t \t }
\t \t \t function render() {
\t \t \t \t camera.position.x += (mouseX - camera.position.x) * .05;
\t \t \t \t camera.position.y += (- mouseY + 200 - camera.position.y) * .05;
\t \t \t \t camera.lookAt(scene.position);
\t \t \t \t renderer.render(scene, camera);
\t \t \t }<script src="http://threejs.org/build/three.min.js"></script>
<script src="http://threejs.org/examples/js/renderers/Projector.js"></script>
<script src="http://threejs.org/examples/js/renderers/CanvasRenderer.js"></script>だから私はクリック可能な要素内の各球状の頂点を作るためにそのデモを使用することにしました。リンク。
私は一週間前からこのことをしようとしてきたが、私は解決策を見つけることができませんし、私の最善のアプローチはこれです：私が望むよう
\t \t \t var container;
\t \t \t var camera, scene, renderer;
\t \t \t var raycaster;
\t \t \t var mouse;
\t \t \t var PI2 = Math.PI * 2;
\t \t \t var programStroke = function (context) {
\t \t \t \t context.beginPath();
\t \t \t \t context.arc(0, 0, 0.5, 0, PI2, true);
\t \t \t \t context.fill();
\t \t \t };
\t \t \t var programFill = function (context) {
\t \t \t \t context.lineWidth = 0.025;
\t \t \t \t context.beginPath();
\t \t \t \t context.arc(0, 0, 0.5, 0, PI2, true);
\t \t \t \t context.stroke();
\t \t \t };
\t \t \t var INTERSECTED;
\t \t \t init();
\t \t \t animate();
\t \t \t function init() {
\t \t \t \t container = document.createElement('div');
\t \t \t \t document.body.appendChild(container);
\t \t \t \t camera = new THREE.PerspectiveCamera(70, window.innerWidth/window.innerHeight, 1, 10000);
\t \t \t \t camera.position.set(0, 300, 500);
\t \t \t \t scene = new THREE.Scene();
\t \t \t \t for (var i = 0; i < 200; i ++) {
\t \t \t \t \t var particle = new THREE.Sprite(new THREE.SpriteCanvasMaterial({ color: Math.random() * 0x000fff , program: programStroke }));
\t \t \t \t \t particle.position.x = Math.random() * 800 - 400;
\t \t \t \t \t particle.position.y = Math.random() * 800 - 400;
\t \t \t \t \t particle.position.z = Math.random() * 800 - 400;
\t \t \t \t \t particle.scale.x = particle.scale.y = Math.random() * 10 + 10;
\t \t \t \t \t particle.data = { url: "http://google.com" }
\t \t \t \t \t scene.add(particle);
\t \t \t \t }
\t \t \t \t
\t \t \t \t
\t \t \t \t raycaster = new THREE.Raycaster();
\t \t \t \t mouse = new THREE.Vector2();
\t \t \t \t renderer = new THREE.CanvasRenderer();
\t \t \t \t renderer.setClearColor(0xffffff);
\t \t \t \t renderer.setPixelRatio(window.devicePixelRatio);
\t \t \t \t renderer.setSize(window.innerWidth, window.innerHeight);
\t \t \t \t container.appendChild(renderer.domElement);
\t \t \t \t document.addEventListener('mousemove', onDocumentMouseMove, false);
\t \t \t \t document.addEventListener('mousedown', onDocumentMouseDown, false);
\t \t \t \t //
\t \t \t \t window.addEventListener('resize', onWindowResize, false);
\t \t \t }
\t \t \t function onWindowResize() {
\t \t \t \t camera.aspect = window.innerWidth/window.innerHeight;
\t \t \t \t camera.updateProjectionMatrix();
\t \t \t \t renderer.setSize(window.innerWidth, window.innerHeight);
\t \t \t }
\t \t \t function onDocumentMouseMove(event) {
\t \t \t \t event.preventDefault();
\t \t \t \t mouse.x = (event.clientX/window.innerWidth) * 2 - 1;
\t \t \t \t mouse.y = - (event.clientY/window.innerHeight) * 2 + 1;
\t \t \t }
\t \t \t //
\t \t \t function animate() {
\t \t \t \t requestAnimationFrame(animate);
\t \t \t \t render();
\t \t \t }
\t \t \t function onDocumentMouseDown(event) {
\t \t \t \t raycaster.setFromCamera(mouse, camera);
\t \t \t \t var intersects = raycaster.intersectObjects(scene.children);
\t \t \t \t if (intersects.length > 0) {
\t \t \t \t \t window.open("http://www.w3schools.com");
\t \t \t \t \t INTERSECTED = null;
\t \t \t \t }
\t \t \t \t
\t \t \t }
\t \t \t var radius = 600;
\t \t \t var theta = 0;
\t \t \t function render() {
\t \t \t \t // rotate camera
\t \t \t \t theta += 0.1;
\t \t \t \t camera.position.x = radius * Math.sin(THREE.Math.degToRad(theta));
\t \t \t \t camera.position.y = radius * Math.sin(THREE.Math.degToRad(theta));
\t \t \t \t camera.position.z = radius * Math.cos(THREE.Math.degToRad(theta));
\t \t \t \t camera.lookAt(scene.position);
\t \t \t \t camera.updateMatrixWorld();
\t \t \t \t // find intersections
\t \t \t \t raycaster.setFromCamera(mouse, camera);
\t \t \t \t renderer.render(scene, camera);
\t \t \t }<script src="http://threejs.org/build/three.min.js"></script>
<script src="http://threejs.org/examples/js/renderers/Projector.js"></script>
<script src="http://threejs.org/examples/js/renderers/CanvasRenderer.js"></script>これは正確ではなく、少なくともクリック可能なパーティクルです。しかし、私が粒子をクリックすると、いくつかのリンクをランダムに使用するにはどうすればいいですか？
この例はthree.jsライブラリhttp://threejs.org/examples/#canvas_interactive_particlesにありますが、私はそれが欲しいのと同じように対話があります。クリック可能にする要素を変更するためにtryiedしましたが、解決策が見つかりませんでした。
提案がありますか？
は