logo标签列表

THREE.js的线条对象在浏览器中无法运行

javascriptthree.js
3
我是一个新手，想学习THREE.js技术。 但是当我在浏览器中打开这段代码时，只出现了一个黑屏，而不是三角形。 请帮助我找出代码中的问题。 

<!DOCTYPE html>
<html>
<head>
    <title>First Line Object</title>
    <style>
        body{ margin: 0; }
        canvas { width: 100%; height: 100%; }
    </style>
</head>
<body>
    <script src="js/three.js"></script>
    <script>
    var scene = new THREE.Scene();
    var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);

    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    var lineGeom = new Geometry();
    lineGeom.vertices = [
        new THREE.Vector3(-2,-2, 0),
        new THREE.Vector3(2, -2, 0),
        new THREE.Vector3(0, 2, 0),
        new THREE.Vector3(-2,-2, 0)
    ];

    var lineMat = new THREE.LineBasicMaterial({
        color: 0xA000A0,
        linewidth: 2
    });

    var line = new THREE.Line(lineGeom, lineMat, THREE.LineStrip);
    scene.add(line);

    camera.position.z = 5;

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

    </script>
</body>
</html>

上述代码应该基于数组中给定的顶点显示一个三角形。但它只显示一个黑屏，什么也没有。
var lineGeom = new Geometry(); should be var lineGeom = new THREE.Geometry(); - prisoner849
@prisoner849 感谢您的帮助！现在它已经很好地工作了。 - user5955461
1个回答
3

初始化几何体时出现问题。你需要像这样使用构造函数：

new THREE.Geometry()

这将解决你的问题。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接