Question

您好我正在使用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();
}

Answer 1

RE：textures - 您使用var loader = new THREE.TextureLoader();实例化一个加载器，但您从不使用它。注释代码不会执行。但即使它没有被注释，你在定义回调之前有两个逗号，所以它可能会被调用onError而不是onLoad。

每当您对THREEjs first look at the reference.

有疑问时

Specifically this entry.

如何在three.js中为多维数据集提供各种属性？

1 个答案: