如何使用不是平面形状(表面)的threejs绘制具有3d点(x,y,z)的形状几何图形 [英] How to draw Shape geometry with 3d points(x,y,z) using threejs which is not flat shape(surface)
本文介绍了如何使用不是平面形状(表面)的threejs绘制具有3d点(x,y,z)的形状几何图形的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(0, 10, 300);
var renderer = new THREE.WebGLRenderer({
antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
var controls = new THREE.TrackballControls(camera, renderer.domElement);
var light = new THREE.DirectionalLight(0xffffff, 0.5);
light.position.setScalar(100);
scene.add(light);
scene.add(new THREE.AmbientLight(0xffffff, 0.5));
var closedSpline = new THREE.CatmullRomCurve3([
new THREE.Vector3(-60, -100, -10),
new THREE.Vector3(-60, 20, 0),
new THREE.Vector3(-60, 120, -20),
new THREE.Vector3(60, 120, 0),
new THREE.Vector3(60, -100, 10)
]);
closedSpline.curveType = 'catmullrom';
closedSpline.closed = true;
var closedSpline1 = new THREE.CatmullRomCurve3([
new THREE.Vector3(-50, -90, -10),
new THREE.Vector3(-50, 10, 0),
new THREE.Vector3(-50, 110, -20),
new THREE.Vector3(50, 110, 0),
new THREE.Vector3(50, -90, 10)
]);
closedSpline1.curveType = 'catmullrom';
closedSpline1.closed = true;
var tubeGeometry = new THREE.TubeBufferGeometry(closedSpline, 100, 1, 5, true);
var material = new THREE.MeshLambertMaterial({
color: 0xb00000,
wireframe: false
});
var mesh = new THREE.Mesh(tubeGeometry, material);
scene.add(mesh);
var tubeGeometry1 = new THREE.TubeBufferGeometry(closedSpline1, 100, 1, 5,true);
var material1 = new THREE.MeshLambertMaterial({
color: 0xb00000,
wireframe: false
});
var mesh1 = new THREE.Mesh(tubeGeometry1, material1);
scene.add(mesh1);
// magic starts here
var shape = new THREE.Shape(closedSpline1.getPoints(100)); // make a shape
shape.holes.push(new THREE.Path(closedSpline1.getPoints(100))); // add a hole
var shapeGeometry = new THREE.ShapeGeometry(shape); // create a geometry
var track = new THREE.Mesh(shapeGeometry, new THREE.MeshLambertMaterial({
color: "yellow",
side:THREE.DoubleSide,
})); // create a track from the geometry
scene.add(track);
render();
function render() {
requestAnimationFrame(render);
controls.update();
renderer.render(scene, camera);
}
上面是我的代码,它使用 THREE.CatmullRomCurve3
点和这两个管之间的表面绘制两个管几何.我面临的问题是这两个管之间的表面(上面代码中的轨道)总是平坦的(2d)而不是 3d.我认为 THREE.Shape()
没有使用 z 轴值来绘制表面.任何人都可以指导我正确的方向或一些相关的样本.谢谢
Above is my code which draw two tube geometry using THREE.CatmullRomCurve3
points and surface between those two tubes. Issue i am facing is surface between those two tubes(Track in above code) is always flat(2d) instead of 3d. I think THREE.Shape()
are not using z axis values to draw surface. Can anybody guide me to right direction or some related samples. Thanks
推荐答案
您可以使用曲线和 THREE.PlaneGeometry()
的串联点集来解决问题:
You can do the trick, using concatenated sets of points from curves and THREE.PlaneGeometry()
:
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(0, 10, 300);
var renderer = new THREE.WebGLRenderer({
antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
var controls = new THREE.OrbitControls(camera, renderer.domElement);
var light = new THREE.DirectionalLight(0xffffff, 0.5);
light.position.setScalar(100);
scene.add(light);
scene.add(new THREE.AmbientLight(0xffffff, 0.5));
var closedSpline = new THREE.CatmullRomCurve3([
new THREE.Vector3(-60, -100, -10),
new THREE.Vector3(-60, 20, 0),
new THREE.Vector3(-60, 120, -20),
new THREE.Vector3(60, 120, 0),
new THREE.Vector3(60, -100, 10)
]);
closedSpline.curveType = 'catmullrom';
closedSpline.closed = true;
var closedSpline1 = new THREE.CatmullRomCurve3([
new THREE.Vector3(-50, -90, -10),
new THREE.Vector3(-50, 10, 0),
new THREE.Vector3(-50, 110, -20),
new THREE.Vector3(50, 110, 0),
new THREE.Vector3(50, -90, 10)
]);
closedSpline1.curveType = 'catmullrom';
closedSpline1.closed = true;
var tubeGeometry = new THREE.TubeBufferGeometry(closedSpline, 100, 1, 5, true);
var material = new THREE.MeshLambertMaterial({
color: 0xb00000,
wireframe: false
});
var mesh = new THREE.Mesh(tubeGeometry, material);
scene.add(mesh);
var tubeGeometry1 = new THREE.TubeBufferGeometry(closedSpline1, 100, 1, 5,
true);
var material1 = new THREE.MeshLambertMaterial({
color: 0xb00000,
wireframe: false
});
var mesh1 = new THREE.Mesh(tubeGeometry1, material1);
scene.add(mesh1);
// magic starts here
var points1 = closedSpline.getPoints(100); // get the first set of points
var points2 = closedSpline1.getPoints(100); // get the second set of points
var allPoints = points1.concat(points2); // concatenate them
var planeGeom = new THREE.PlaneGeometry(1, 1, 100, 1); // create a plane geometry
planeGeom.vertices = allPoints; // replace its vertices with the previously concatenated array of points
planeGeom.computeFaceNormals();
planeGeom.computeVertexNormals();
var track = new THREE.Mesh(planeGeom, new THREE.MeshLambertMaterial({
color: "yellow",
wireframe: false
}));
scene.add(track);
render();
function render() {
requestAnimationFrame(render);
renderer.render(scene, camera);
}
body {
overflow: hidden;
margin: 0;
}
<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
这篇关于如何使用不是平面形状(表面)的threejs绘制具有3d点(x,y,z)的形状几何图形的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文