Question

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

Answer 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;

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

希望有所帮助。

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

1 个答案: