嗨,我目前正在使用three.js,我已经创建了四个立方体,我正在尝试(1)通过导入另一个图片来获得其中一个立方体的纹理,(2)使光从其中一个立方体反射,(3)并使一个立方体透明。我试图做到这一点,但当我使用var纹理加载时,图片不会出现在立方体上,我真的不明白光从其中一个立方体反射是什么意思。我想我把透明度弄对了。谢谢你的帮助。
这里是我到目前为止所写的代码。
//declaring variables
var scene;
var renderer;
var mesh, newMesh;
init();
animate();
//initiating function to create 4 cubes
function init() {
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000);
var light = new THREE.DirectionalLight( 0xffffff );
light.position.set( 0, 1, 1 ).normalize();
scene.add(light);
var geometry = new THREE.CubeGeometry( 10, 10, 10);
var material = new THREE.MeshLambertMaterial({color: 0x0033ff , transparent: true, opacity: 0.5});
// positioning the cubes and adding the necessary texture to them
mesh = new THREE.Mesh(geometry, material );
mesh.position.z = -50;
scene.add( mesh );
newMesh = mesh.clone();
newMesh.material =new THREE.MeshPhongMaterial( { ambient: 0x050505, color: 0x0033ff, specular: 0x555555, shininess: 70} );
newMesh.position.x = 50;
scene.add(newMesh);
newMesh2 = mesh.clone();
newMesh2.material =new THREE.MeshLambertMaterial({color: 0x0033ff});
newMesh2.position.y = -25;
scene.add(newMesh2);
newMesh3 = mesh.clone();
var loader = new THREE.TextureLoader();
// loader.load("http://www.photoshoptextures.com/sky-textures/blue-sky-texture.jpg",, function(texture) {
// newMesh3.material = new THREE.MeshLambertMaterial({map: texture});
newMesh3.position.x =30 ;
scene.add(newMesh3) ;
renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
window.addEventListener( 'resize', onWindowResize, false );
render();
}
// ease of rotation so that you can clearly see the image of the cube
function animate() {
mesh.rotation.x += .04;
mesh.rotation.y += .02;
newMesh.rotation.y += .04;
newMesh.rotation.z += .02;
newMesh2.rotation.y += .04;
newMesh2.rotation.z += .02;
newMesh3.rotation.y += .04;
newMesh3.rotation.z += .02;
render();
requestAnimationFrame( animate );
}
// rendering
function render() {
renderer.render( scene, camera );
}
// setting up the camera
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
render();
}
发布于 2016-09-30 15:33:26
RE: textures -你用var loader = new THREE.TextureLoader();
实例化了一个加载器,但是你从来没有用过它。注释代码不会执行。但即使它没有注释,在定义回调之前也有两个逗号,所以它可能会被称为onError而不是onLoad。
无论何时您有关于THREEjs first look at the reference.的问题
https://stackoverflow.com/questions/39768618
复制相似问题