Question

我试图通过滑块自定义形状，然后通过ExtrudeGeometry挤出形状。首先，我在“pts”中创建了4个点，然后用它们创建了一个“形状”，最后，通过一条线挤出它来创建一个geomtery。但是，我无法使其有效。我的HTML代码如下：

<head>


<script src="three.min.js"> </script>
<script src="three.js"> </script>


<script src="TrackballControls.js"></script>
<script src="main.js"> </script>
</head>


<body onload="start()">
<div id="s"> </div>
</body>

</html>

和“main”js文件如下：

var camera, scene, renderer, phone, material, mesh;
var shape, extrudeSettings, randomSpline, controls;
var pts = [];
var randomPoints = [];
var v;
function start() {

scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,1,10000);
camera.position.set( 0, 0, 500 );
renderer = new THREE.WebGLRenderer();
renderer.setClearColor( 0x222222 );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
controls = new THREE.TrackballControls( camera, renderer.domElement );
                controls.minDistance = 100;
                controls.maxDistance = 600;

scene.add(camera);
pts.push( new THREE.Vector3 (100,1,0));
pts.push( new THREE.Vector3 (-100,1,0));
pts.push( new THREE.Vector3 (-100,-1,0));
pts.push( new THREE.Vector3 (100,-1,0));

randomPoints.push( new THREE.Vector3 (0,0,10));
randomPoints.push( new THREE.Vector3 (0,0,-10));

randomSpline =  new THREE.SplineCurve3( randomPoints );
extrudeSettings = {
                    steps           : 200,
                    bevelEnabled    : false,
                    extrudePath     : randomSpline
                };
shape = new THREE.Shape(pts);

phone = new THREE.ExtrudeGeometry(shape, extrudeSettings);

material = new THREE.MeshBasicMaterial({color:0x0000FF, wireframe:true});
mesh = new THREE.Mesh(phone,material);
scene.add(mesh);

var slider = document.createElement("input");
slider.setAttribute("type", "range");
slider.setAttribute("value", 90);
slider.setAttribute("id", "sliding");

document.getElementById("s").appendChild(slider);

document.getElementById("s").style.position = "absolute";
document.getElementById("s").style.zIndex="1";


animate();
}
function animate() {
    requestAnimationFrame(animate);
    v = document.getElementById("sliding").value;
    pts[0].x = v;
    pts[1].x = -v;
    pts[2].x = -v;
    pts[3].x = v;

    shape.needsUpdate = true;
    phone.verticesNeedUpdate = true;


    phone.dynamic=true;

    controls.update();
renderer.render( scene, camera );
}

Answer 1

创建ExtrudeGeometry时，它会根据参数创建几何体，但不会存储您从中创建的对象。每次要更新时都需要创建new ExtrudeGeometry，或者您可以根据需要简单地调整phone.scale。

如何在three.js中更新形状（而不是几何）？

1 个答案: