如何将 3d 对象创建到网页中并移动它？答案

【问题标题】：How create 3d object into a web page and move it?如何将 3d 对象创建到网页中并移动它？
【发布时间】：2015-08-03 17:02:04
【问题描述】：

我是新手，请原谅我的英语。有我的问题：我想实现一个网页（使用HTML5），其中有一个平面（3D），并且可以让它飞行，移动等..，总是在这个区域内。我想知道我怎样才能做到这一点？我读到这可以使用 Three.js ，但是对象的创建和运动呢？例如，我阅读了有关用于创建 3d 对象的软件 Blender，但是一旦创建了 3D 对象，我如何将它导入页面并用鼠标（或键盘）移动它？我再说一遍，我是新手，也许这似乎是一个愚蠢的问题，但我会提出一些建议来了解我应该从哪里开始。非常感谢您的关注

【问题讨论】：

我不熟悉three.js，但看起来您可以将Blender 对象导出到.OBJ 文件，然后使用the OBJ loader 加载和解析它。

标签： javascript html three.js blender

【解决方案1】：

要创建简单的计划，您不必创建 3D 模型。有一种更简单的方法可以做到这一点，但首先您必须使用相机和渲染器创建 3D 场景。此外，您必须在页面中添加<div> 标签才能在其中呈现场景。

添加到 HTML：

<div id="scene" style="width:1000px; height:500px"></div>

JS 可能看起来像这样：

var mountElem = document.getElementById('scene');
var width = mountElem.innerWidth;
var height = mountElem.innerHeight;

function createScene() {
    var scene = new THREE.Scene();
    var camera = getNewCamera(scene.position);
    var renderer = getNewRenderer();

    // Add plane
    var white = 0xffffff;
    var plane = getNewPlane(100, 100, white);
    scene.add(plane);

    renderScene(renderer, scene, camera);
}

function getNewCamera(lookAtPos) {
    var viewPort = 45;
    var near = 0.1;
    var far = 10000;
    var camera = new THREE.PerspectiveCamera(viewPort, width / height, near, far);

    // Set initial position position
    camera.position.set(0, 50, 200);
    camera.lookAt(lookAtPos);

    return camera;
}

function getNewRenderer() {
    var sceneBackgroundColor = 0xaaaaff;
    var alpha = 1;
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(width, height);
    renderer.setClearColor(sceneBackgroundColor, alpha);

    return renderer;
}

function getNewPlane(planeWidth, planeHeight, color) {
    var geometry = new THREE.PlaneBufferGeometry(planeWidth, planeHeight, 1, 1);
    var material = new THREE.MeshBasicMaterial({ color: color, side: THREE.DoubleSide });
    var plane = new THREE.Mesh(geometry, material);
    plane.position.set(0, 0, 0);

    return plane;
}

function renderScene(renderer, scene, camera) {
    mountElem.appendChild(renderer.domElement);
    render(renderer, scene, camera);
}

function render(renderer, scene, camera) {
    requestAnimationFrame(function() { render(renderer, scene, camera); });
    renderer.render(scene, camera);
}

像这样移动一个物体/平面：

plane.position.x += movementX;
plane.position.y += movementY;
plane.position.z += movementZ;

您可以在<div> 上应用mousemove 事件并将上述移动代码放入该事件函数中。 movementX/Y/Z 将是鼠标的移动。

希望有所帮助。

【讨论】：