Javascript 可点击的三个Js对象/凸项
我修改了Three.js库中的一个示例，并尝试在对象上添加click事件 经过多次尝试。。。我还是听不懂 此代码生成凸形 这是我的代码：Javascript 可点击的三个Js对象/凸项,javascript,three.js,Javascript,Three.js,我修改了Three.js库中的一个示例，并尝试在对象上添加click事件 经过多次尝试。。。我还是听不懂 此代码生成凸形 这是我的代码： if ( ! Detector.webgl ) Detector.addGetWebGLMessage(); var container, stats; var camera, scene, renderer; var objects = []; init();
if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
var container, stats;
var camera, scene, renderer;
var objects = [];
init();
animate();
function init() {
container = document.createElement( 'div' );
document.body.appendChild( container );
camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
camera.position.y = 400;
scene = new THREE.Scene();
var light, object, object2, materials;
scene.add( new THREE.AmbientLight( 0x404040 ) );
light = new THREE.DirectionalLight( 0xffffff );
light.position.set( 0, 1, 0 );
scene.add( light );
var map = THREE.ImageUtils.loadTexture( 'textures/ash_uvgrid01.jpg' );
map.wrapS = map.wrapT = THREE.RepeatWrapping;
map.anisotropy = 16;
materials = [
new THREE.MeshLambertMaterial( { ambient: 0xbbbbbb, map: map } ),
new THREE.MeshBasicMaterial( { color: 0x242424, wireframe: true, transparent: false, opacity: 0.1 } )
];
// random convex
points = [];
for ( var i = 0; i < 15; i ++ ) {
points.push( randomPointInSphere( 50 ) );
}
object = THREE.SceneUtils.createMultiMaterialObject( new THREE.ConvexGeometry( points ), materials );
object.position.set( -250, 0, 200 );
scene.add( object );
objects.push( object );
object.callback = function() { console.log('blabla');}
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.top = '0px';
container.appendChild( stats.domElement );
window.addEventListener( 'resize', onWindowResize, false );
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
function randomPointInSphere( radius ) {
return new THREE.Vector3(
( Math.random() - 0.5 ) * 1 * radius,
( Math.random() - 0.5 ) * 1 * radius,
( Math.random() - 0.5 ) * 1 * radius
);
}
function animate() {
requestAnimationFrame( animate );
render();
stats.update();
}
function render() {
var timer = Date.now() * 0.0001;
camera.position.x = Math.cos( timer ) * 800;
camera.position.z = Math.sin( timer ) * 800;
camera.lookAt( scene.position );
for ( var i = 0, l = scene.children.length; i < l; i ++ ) {
var object = scene.children[ i ];
object.rotation.x = timer * 5;
object.rotation.y = timer * 2.5;
}
renderer.render( scene, camera );
}
function addMeteor()
{
var map = THREE.ImageUtils.loadTexture( 'textures/ash_uvgrid01.jpg' );
map.wrapS = map.wrapT = THREE.RepeatWrapping;
map.anisotropy = 16;
var materials = [
new THREE.MeshLambertMaterial( { ambient: 0xbbbbbb, map: map } ),
new THREE.MeshBasicMaterial( { color: 0x242424, wireframe: true, transparent: false, opacity: 0.1 } )
];
objects.push( materials );
var object3;
var points3 = [];
for ( var i = 0; i < 10; i ++ ) {
points3.push( randomPointInSphere( 50 ) );
}
object3 = THREE.SceneUtils.createMultiMaterialObject( new THREE.ConvexGeometry( points3 ), materials );
object3.position.set( -50, Math.floor((Math.random()*window.innerWidth)), Math.floor((Math.random()* window.innerHeight)) );
scene.add( object3 );
objects.push( object3 );
}
projector = new THREE.Projector();
// listeners
document.addEventListener( 'mousedown', onDocumentMouseDown, false)
// keyboard handler
function onDocumentMouseDown( event ) {
event.preventDefault();
console.log('blabla');
var vector = new THREE.Vector3(
( event.clientX / window.innerWidth ) * 2 - 1,
- ( event.clientY / window.innerHeight ) * 2 + 1,
0.5 );
projector.unprojectVector( vector, camera );
var ray = new THREE.Raycaster( camera.position, vector.sub( camera.position ).normalize() );
console.log(objects);
var intersects = ray.intersectObjects( objects );
console.log(intersects);
if ( intersects.length > 0 ) {
intersects[0].object.callback();
console.log('blabla');
}
}
renderer.render( scene, camera );
if（！Detector.webgl）Detector.addGetWebGLMessage（）；
var容器，stats；
摄像机、场景、渲染器；
var对象=[]；
init（）；
制作动画（）；
函数init（）{
container=document.createElement（'div'）；
文件.正文.附件（容器）；
摄像头=新的三个透视摄像头（45，window.innerWidth/window.innerHeight，12000）；
摄像机位置y=400；
场景=新的三个。场景（）；
var灯光、对象、对象2、材质；
添加（新的三个环境光（0x404040））；
灯光=新的三个方向灯光（0xffffff）；
光。位置。设置（0，1，0）；
场景。添加（灯光）；
var map=THREE.ImageUtils.loadTexture（'textures/ash_uvgrid01.jpg'）；
map.wrapps=map.wrapT=THREE.RepeatWrapping；
map.各向异性=16；
材料=[
新的3.MeshLambertMaterial（{ambient:0xbbbbbb，map:map}），
新的3.MeshBasicMaterial（{颜色：0x242424，线框：真，透明：假，不透明度：0.1}）
];
//随机凸
点数=[]；
对于（变量i=0；i<15；i++）{
点推（随机点球（50））；
}
对象=三个.SceneUtils.createMultiMaterialObject（新的三个.凸面几何体（点），材质）；
对象.position.set（-250,0200）；
场景。添加（对象）；
对象。推（对象）；
object.callback=function（）{console.log（'blablabla'）；}
renderer=new THREE.WebGLRenderer（{antialas:true}）；
renderer.setSize（window.innerWidth、window.innerHeight）；
container.appendChild（renderer.doElement）；
统计数据=新统计数据（）；
stats.domElement.style.position='绝对'；
stats.domElement.style.top='0px'；
container.appendChild（stats.domeElement）；
addEventListener（'resize'，onWindowResize，false）；
}
函数onWindowResize（）{
camera.aspect=window.innerWidth/window.innerHeight；
camera.updateProjectMatrix（）；
renderer.setSize（window.innerWidth、window.innerHeight）；
}
函数randomPointInSphere（半径）{
返回新的3.Vector3(
（数学随机（）-0.5）*1*半径，
（数学随机（）-0.5）*1*半径，
（数学随机（）-0.5）*1*半径
);
}
函数animate（）{
请求动画帧（动画）；
render（）；
stats.update（）；
}
函数render（）{
var timer=Date.now（）*0.0001；
camera.position.x=数学cos（计时器）*800；
camera.position.z=Math.sin（计时器）*800；
摄像机。注视（场景。位置）；
对于（变量i=0，l=scene.children.length；i0）{
相交[0]。对象。回调（）；
console.log（'blabla'）；
}
}
渲染器。渲染（场景、摄影机）；
但是哪一个呢
THREE.SceneUtils.createMultiMaterialObject（）Raycaster.intersectObjects（）时，需要将recursive
标志设置为true
var intersects = ray.intersectObjects( objects, true );