时间戳

首页 > 解决方案 > 我的three.js 线条几何图形未显示在屏幕上

three.js - 我的three.js 线条几何图形未显示在屏幕上

问题描述

我想使用three.js 绘制线条，此代码是从three.js 行文档中复制的，但这没有显示任何结果。我得到的只是空白的白屏。

const renderer = new THREE.WebGLRenderer({ antialias: true });
const scene = new THREE.Scene();

var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
camera.position.z = 30

const path = new THREE.Path();

path.lineTo(0, 0.8);
path.quadraticCurveTo(0, 1, 0.2, 1);
path.lineTo(1, 1);

const points = path.getPoints();

const geometry = new THREE.BufferGeometry().setFromPoints(points);
const material = new THREE.LineBasicMaterial({ color: 0x8B008B });

const line = new THREE.Line(geometry, material);
scene.add(line);


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

标签： three.js

解决方案

您已经创建了一个渲染器，但是您没有设置它的大小，也没有将它的画布添加到 HTML 文档中。

按照“入门”部分中的示例进行操作：

const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

推荐阅读