用三J的挤出尺寸错误
我试图了解如何使用三j挤压路径。 我看着 https://threejs.s.s.s.org/docs/index.htex.htmll ＃API/EN/几何/挤出测定法 这就是我需要的。 这是我尝试的代码：
// ------------------------------------------------
// BASIC SETUP
// ------------------------------------------------
// Create an empty scene
var scene = new THREE.Scene();
// Create a basic perspective camera
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
camera.position.z = 150;
// Create a renderer with Antialiasing
var renderer = new THREE.WebGLRenderer({antialias:true});
// Configure renderer clear color
renderer.setClearColor("#000000");
// Configure renderer size
renderer.setSize( window.innerWidth, window.innerHeight );
// Append Renderer to DOM
document.body.appendChild( renderer.domElement );
// ------------------------------------------------
// FUN STARTS HERE
// ------------------------------------------------
function make_graphics(){
// clean up:
for( var i = scene.children.length - 1; i >= 0; i--) {
obj = scene.children[i];
scene.remove(obj);
}
// Create a Shape Mesh with basic material
const shape = new THREE.Shape();
const x_len = 12;
const y_len = 8;
shape.moveTo( 0, 0 );
shape.lineTo( 0, y_len );
shape.lineTo( x_len, y_len );
shape.lineTo( x_len, 0 );
shape.lineTo( 0, 0 );
const extrudeSettings = {
steps: 2,
depth: 12,
bevelEnabled: true,
bevelThickness: 1,
bevelSize: 1,
bevelOffset: 0,
bevelSegments: 1
};
const geometry = new THREE.ExtrudeGeometry( shape, extrudeSettings );
const material = new THREE.MeshBasicMaterial( { color: 0x00ff00, wireframe:true } );
const mesh = new THREE.Mesh( geometry, material ) ;
scene.add( mesh );
// Render Loop
var render = function () {
requestAnimationFrame( render );
mesh.rotation.x += 0.001;
mesh.rotation.y += 0.001;
// Render the scene
renderer.render(scene, camera);
};
render(1, 1, 1);
}
document.addEventListener("DOMContentLoaded", function(){
make_graphics();
});<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Three.js 101</title>
<!-- Simple reset to delete the margins -->
<style>
body { margin: 0; }
canvas { width: 100%; height: 100% }
</style>
<!-- Three.js CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r83/three.min.js"></script>
</head>
<body>
<!-- Our code -->
<script src="script.js"></script>
</body>
</html>挤压很长。它应该是12乘8 x 12，但您可以看到它看起来像一根长杆。有人知道为什么尺寸看起来不对吗？
I'm trying to understand how to extrude a path using threejs.
I looked at https://threejs.org/docs/index.html#api/en/geometries/ExtrudeGeometry
which is what I need.
Here is the code I tried:
// ------------------------------------------------
// BASIC SETUP
// ------------------------------------------------
// Create an empty scene
var scene = new THREE.Scene();
// Create a basic perspective camera
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
camera.position.z = 150;
// Create a renderer with Antialiasing
var renderer = new THREE.WebGLRenderer({antialias:true});
// Configure renderer clear color
renderer.setClearColor("#000000");
// Configure renderer size
renderer.setSize( window.innerWidth, window.innerHeight );
// Append Renderer to DOM
document.body.appendChild( renderer.domElement );
// ------------------------------------------------
// FUN STARTS HERE
// ------------------------------------------------
function make_graphics(){
// clean up:
for( var i = scene.children.length - 1; i >= 0; i--) {
obj = scene.children[i];
scene.remove(obj);
}
// Create a Shape Mesh with basic material
const shape = new THREE.Shape();
const x_len = 12;
const y_len = 8;
shape.moveTo( 0, 0 );
shape.lineTo( 0, y_len );
shape.lineTo( x_len, y_len );
shape.lineTo( x_len, 0 );
shape.lineTo( 0, 0 );
const extrudeSettings = {
steps: 2,
depth: 12,
bevelEnabled: true,
bevelThickness: 1,
bevelSize: 1,
bevelOffset: 0,
bevelSegments: 1
};
const geometry = new THREE.ExtrudeGeometry( shape, extrudeSettings );
const material = new THREE.MeshBasicMaterial( { color: 0x00ff00, wireframe:true } );
const mesh = new THREE.Mesh( geometry, material ) ;
scene.add( mesh );
// Render Loop
var render = function () {
requestAnimationFrame( render );
mesh.rotation.x += 0.001;
mesh.rotation.y += 0.001;
// Render the scene
renderer.render(scene, camera);
};
render(1, 1, 1);
}
document.addEventListener("DOMContentLoaded", function(){
make_graphics();
});<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Three.js 101</title>
<!-- Simple reset to delete the margins -->
<style>
body { margin: 0; }
canvas { width: 100%; height: 100% }
</style>
<!-- Three.js CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r83/three.min.js"></script>
</head>
<body>
<!-- Our code -->
<script src="script.js"></script>
</body>
</html>The extrusion is very long. It should be 12 by 8 by 12 but you can see it looks like a long rod. Does anyone know why the dimensions look wrong?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
您使用的是旧版本的trix.js（R83）。在该版本中，将
深度选项挤出在中被称为intrudeSettings 对象，或（最好是）更改cdn链接以导入更新的three.js的最新版本，您的代码应按预期工作。nose，如果不存在，则默认为100。如果您将深度更改为金额You're using an old version of Three.js (r83). In that version, what became the
depthoption inExtrudeGeometrywas calledamount, and it defaults to 100 if it's not present. If you changedepthtoamountin yourextrudeSettingsobject, or (preferably) change your CDN link to import a more recent version of Three.js, your code should work as expected.