当我将其用作一个立方体和一个球体的代码时,它会将该立方体的某些部分切除:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="csg.js"></script>
<script type="text/javascript" src="http://chandler.prallfamily.com/threebuilds/builds/r46/ThreeMin.js"></script>
<script type="text/javascript" src="ThreeCSG.js"></script>
<script type="text/javascript">
window.onload = function() {
var projector = new THREE.Projector( );
var renderer = new THREE.WebGLRenderer({antialias: false});
renderer.setSize(800, 640);
document.getElementById('viewport').appendChild(renderer.domElement);
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(
35,
800 / 640,
1,
10000
);
camera.position.set(5, 1.8, 5);
camera.lookAt(scene.position);
var cube = THREE.CSG.toCSG(
new THREE.CubeGeometry( 2, 2, 2 ),
new THREE.Vector3(-1, 0, 0)
);
var sphere = THREE.CSG.toCSG(new THREE.SphereGeometry(1.4, 16, 16));
var geometry = cube.subtract(sphere);
var mesh = new THREE.Mesh(
THREE.CSG.fromCSG( geometry ),
new THREE.MeshNormalMaterial()
);
scene.add( mesh );
renderer.render(scene, camera);
}
</script>
</head>
<body>
<div id="viewport"></div>
</body>
</html>
现在如何设置立方体的位置?我需要像立方体这样的东西吗。CSG.position.set,或者CSG库是否有特殊方法可供使用?
谢谢!
您需要在设置渲染器后调用一个函数,如:
animate();
定义如下:
function animate()
{
requestAnimationFrame(animate);
cube.position.x = your_value;
}