首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何在three.js中为多维数据集赋予各种属性?

如何在three.js中为多维数据集赋予各种属性?
EN

Stack Overflow用户
提问于 2016-09-29 19:08:42
回答 1查看 72关注 0票数 0

嗨,我目前正在使用three.js,我已经创建了四个立方体,我正在尝试(1)通过导入另一个图片来获得其中一个立方体的纹理,(2)使光从其中一个立方体反射,(3)并使一个立方体透明。我试图做到这一点,但当我使用var纹理加载时,图片不会出现在立方体上,我真的不明白光从其中一个立方体反射是什么意思。我想我把透明度弄对了。谢谢你的帮助。

这里是我到目前为止所写的代码。

代码语言:javascript
复制
//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();
}
EN

回答 1

Stack Overflow用户

发布于 2016-09-30 15:33:26

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

无论何时您有关于THREEjs first look at the reference.的问题

Specifically this entry.

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/39768618

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档