将图像添加到构造实体几何体

时间:2013-11-16 21:15:37

标签: javascript three.js

我在以下网站http://stemkoski.github.io/Three.js/查看three.js示例,并遇到了Constructive Solid Geometry示例。本教程通过示例演示如何从球体中减去立方体。该示例使用THREE.MeshNormalMaterial();.我想在从球体中减去立方体之前向球体添加图像。我将列出下面的代码。

示例中的代码

var materialNormal = new THREE.MeshNormalMaterial();

var cubeGeometry = new THREE.CubeGeometry( 100, 100, 100, 1, 1, 1 );
var cubeMesh = new THREE.Mesh( cubeGeometry );
var cubeBSP = new ThreeBSP( cubeMesh );

var sphereGeometry = new THREE.SphereGeometry( 60, 32, 32 );
var sphereMesh = new THREE.Mesh( sphereGeometry );
var sphereBSP = new ThreeBSP( sphereMesh );

// Example #2 - Sphere subtract Cube
var newBSP = sphereBSP.subtract( cubeBSP );
var newMesh = newBSP.toMesh( materialNormal );
newMesh.position.set(180, 60, 0);
scene.add( newMesh );

为了实现添加图像的目标,我稍微修改了代码。将materialNormal更改为materialBasic。

var spherImg2 = new THREE.ImageUtils.loadTexture( 'images/roomDoorsb.jpg' );
var materialBasic = new THREE.MeshBasicMaterial( { map: spherImg2, side:THREE.DoubleSide } );

var cubeGeometry = new THREE.CubeGeometry( 100, 100, 100, 1, 1, 1 );
var cubeMesh = new THREE.Mesh( cubeGeometry );
var cubeBSP = new ThreeBSP( cubeMesh );

var sphereGeometry = new THREE.SphereGeometry( 60, 32, 32 );
var sphereMesh = new THREE.Mesh( sphereGeometry );
var sphereBSP = new ThreeBSP( sphereMesh );

// Example #2 - Sphere subtract Cube
var newBSP = sphereBSP.subtract( cubeBSP );
var newMesh = newBSP.toMesh( materialBasic );
newMesh.position.set(180, 60, 0);
scene.add( newMesh );

球体的其余部分不显示所需的图像。只是显示灰色。另外我想要注意的是示例中的ThreeCSG.js文件引发了错误。我认为第215行已经过时了所以我更换了它。

mesh.rotation.setEulerFromRotationMatrix( this.matrix ); 

我把它改成了

mesh.quaternion.setFromRotationMatrix( this.matrix );

如果收到任何帮助,我将非常感激。谢谢

0 个答案:

没有答案