第一步's与THRE.js:试图将搅拌机模型添加到场景中的问题

First step's with THREE.js : issues trying to add a blender model to scene

本文关键字：添加 模型 搅拌机 问题 THRE js 第一步      更新时间：2023-11-01

我正在使用THREE.js.执行我的第一步

现在，我只是尝试修改这里的一个示例文件：http://aerotwist.com/tutorials/getting-started-with-three-js/

该文件创建了一个THREE场景，添加了一个球体和一个点光源。

我的问题是：我不知道如何用我用搅拌机2.63创建并使用搅拌机2.63导出器导出的模型来替换球体。

我想我的语法有点错误。

下面是我的代码。有人能告诉我该改变什么才能让我的搅拌机模型在舞台上展示吗？

thx。

<head>
    <meta charset="utf-8" />
    <title>Sample Three.js</title>
    <link rel="stylesheet" href="js/Styles.css" />
</head>
<body>
    <div id="container">
    </div>
</body>
<script src="js/Stats.js"></script>
<script src="js/Three.js"></script>
<script>
var WIDTH = 700,
    HEIGHT = 600;

var VIEW_ANGLE = 45,
    ASPECT = WIDTH / HEIGHT,
    NEAR = 0.1,
    FAR = 10000;
var container = window.document.getElementById('container');

var renderer = new THREE.WebGLRenderer();
var camera = new THREE.PerspectiveCamera(  VIEW_ANGLE,
                                ASPECT,
                                NEAR,
                                FAR  );
var scene = new THREE.Scene();

camera.position.z = 300;

renderer.setSize(WIDTH, HEIGHT);

container.appendChild(renderer.domElement);

var sphereMaterial = new THREE.MeshLambertMaterial(
{
    color: 0xCC0000
});

//var radius = 50, segments = 16, rings = 16;
var loader = new THREE.JSONLoader();
loader.load( 'js/ModelTest.js', function ( geometry ) {
    mesh = new THREE.Mesh( geometry, sphereMaterial );
    scene.add( mesh );
    mesh.position.x = 0;
    mesh.position.y = 0;
    mesh.position.z = 0;
alert(mesh.geometry.vertices.length)
} );
//var sphere = new THREE.Mesh(
//new THREE.SphereGeometry(radius, segments, rings),sphereMaterial);
//scene.add(sphere);
scene.add(camera);
var pointLight = new THREE.PointLight( 0xFFFFFF );
pointLight.position.x = 10;
pointLight.position.y = 50;
pointLight.position.z = 130;
scene.add(pointLight);
renderer.render(scene, camera);
</script>

也许这是一个愚蠢的答案，但我也遇到了同样的问题，并解决了缩放对象的问题。尝试在mesh.position.z=0:之后添加回调函数

mesh.scale.x=网格.scale.y=网格.sscale.z=200；

对我来说，它奏效了。

希望有用。Pietro

如果没有一个实际的例子，很难知道。。。

加载是异步进行的。将render（）调用移到加载器回调函数的最后一行。（替换您的提醒电话）。

确保相机离模型足够近，可以看到它。

camera.lookAt( scene.position )将确保相机在移动后看到原点。

相关文章：