我正在使用three.js绘制几个3D对象。
目前，我绘制了一个从左侧向我移动的矩形:
body { margin: 0; }
canvas { width: 100%; height: 100% } <title> </title>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r70/three.js"></script>
<script src="js/three.min.js"></script>
<script>
function five(x){
x_rounded = 5 * Math.round(x/5);
return(x_rounded);
}
var transparency = {0: "00", 5: "0D", 10: "1A", 15: "26", 20: "33", 25: "40", 30: "4D", 35: "59", 40: "66", 45: "73", 50: "80", 55: "8C", 60: "99", 65: "A6", 70: "B3", 75: "BF", 80: "CC", 85: "D9", 90: "E6", 95: "F2", 100: "FF"};
var scene = new THREE.Scene();
// var scene2 = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
var renderer = new THREE.WebGLRenderer();
var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2();
mouse.x = 0;
mouse.y = 0;
var speed = 0.1;
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
var shapes = [];
camera.position.x = 4;
shapes.push(new THREE.BoxGeometry( 1, 3, 0.75 ));
camera.position.x = 6;
shapes.push(new THREE.BoxGeometry( 1, 3, 0.75 ));
camera.position.z = 25;
trans = transparency[five(camera.position.z)];
var material = new THREE.MeshBasicMaterial( { color: '#'+trans+'#F5F5F5' } );
var cubes = [];
for(var i = 0;i<shapes.length;i++){
cube = new THREE.Mesh( shapes[i], material )
cubes.push(cube);
}
scene.add(cubes[0]);
scene.add(cubes[1]);
camera.position.x = 4;
var render = function () {
requestAnimationFrame( render );
camera.position.z -= speed;
trans = transparency[five(camera.position.z)];
col = '#'+trans+'#F5F5F5';
material = new THREE.MeshBasicMaterial( { color: col} );
scene = new THREE.Scene();
scene.add(new THREE.Mesh(shapes[0], material));
if(camera.position.z <= 0){
camera.position.z = 25;
// shapes.push(new THREE.BoxGeometry( 1, 3, 0.75 ));
// cubes.push(new THREE.Mesh(shapes[shapes.length-1], material));
// scene.add(cubes[cubes.length-1]);
}
// cube.rotation.x += 0.05;
// cube.rotation.y += 0.05;
// cube.rotation.z += 0.05;
renderer.render(scene, camera);
};
render();
function onMouseMove( event ) {
// calculate mouse position in normalized device coordinates
// (-1 to +1) for both components
mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1
mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1
}
window.addEventListener( 'mousemove', onMouseMove, false );
window.requestAnimationFrame(render);
</script>
</body>但是，我现在想绘制另一个从右向我移动的矩形(左边那个的镜像)。我尝试添加一个新矩形并更改
camera.position.y和.x，但是没有任何效果。另外，每次矩形循环时，我都希望它从背景渐变为前景。在three.js中可能吗？ 最佳答案
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
var geometries = [];
geometries.push(new THREE.BoxGeometry(1, 3, 0.75));
geometries.push(new THREE.BoxGeometry(1, 3, 0.75));
var material = new THREE.MeshNormalMaterial({
color: 0xff0000
});
var meshes = [];
meshes.push(new THREE.Mesh(geometries[0], material));
meshes.push(new THREE.Mesh(geometries[1], material));
meshes[0].position.set(2, 0, -10);
scene.add(meshes[0]);
meshes[1].position.set(-2, 0, -15);
scene.add(meshes[1]);
var time = new Date();
function render() {
// delta in ms
var newTime = new Date();
var delta = newTime - time;
time = newTime;
// move the boxes
var mult = 0.005;
meshes[1].position.z += delta * mult;
meshes[0].position.z += delta * mult;
renderer.render(scene, camera);
requestAnimationFrame(render);
};
requestAnimationFrame(render);<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r70/three.js"></script>我强烈建议您先阅读文档，因为您的代码根本不好，您需要先了解一些小事实:
THREE.Scene将保存所有要渲染的对象renderer.render(scene, camera) THREE将映射我们中的所有3d对象在计算表示后，将场景场景转换为2d平面(也就是我们在屏幕上看到的)用
THREE.WebGLRenderer 在上面的示例中，我没有移动对象，而是移动了对象(我假设这就是您想要的)，首先要注意的是，THREE使用右手法则，默认情况下，所有创建的对象(以及
camera)都位于在原点中，摄影机是一个特殊的对象，因为它还具有指向摄影机所看方向的 vector (它最初是在寻找-z的)对于这个简单的示例，我们不需要移动摄影机，将对象从摄影机上移开怎么办？我们可以通过设置要从相机移开的对象的
z坐标(通过-z单位的任意倍数)来实现此目的，此外，由于您想要在对象的右侧和左侧进行更改，它是x坐标，左边的对象需要具有x vector 单位的-x坐标，而右边的对象则需要x vector 单位的倍数。最后，在游戏循环中，我们只需要将它们移向摄像机，即更改其z坐标即可。请确保阅读一些有关3d数学的知识，Udacity's course是一个不错的起点:)