three.js 简单画线报错

最新推荐文章于 2024-01-18 16:33:57 发布

光影少年

最新推荐文章于 2024-01-18 16:33:57 发布

阅读量2.4k

点赞数

文章标签： javascript 开发语言 ecmascript

原文链接：three.js 简单画线

版权

文章讲述了在使用three.js时遇到THREE.Geometry不再是一个构造函数的错误，原因是从125版本开始该API已被弃用，推荐使用BufferGeometry替代。作者提供了代码示例，展示如何使用BufferGeometry创建和设置顶点，以避免版本不兼容的问题。

摘要由CSDN通过智能技术生成

报错THREE.Geometry is not a constructor

基本得引入都没问题；

最后才发现 new THREE.Geometry()；125版本就不再支持这个api了，如果还需要就用他的子类BufferGeometry

需要更换three.js版本如下

代码如下

<!DOCTYPE html>
<html>
<head>
<title>Line</title>
<style type="text/css">
body { margin: 0; }
canvas { width: 100%; height: 100%; }
</style>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/three@0.152.2/build/three.min.js"></script>

<script type="text/javascript" >

// 渲染器--------------------
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
// 摄像机---------------------
var camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 500 );
camera.position.set( 0, 0, 100 );
camera.lookAt( 0, 0, 0 );
// 场景-----------------------
var scene = new THREE.Scene();
//--------------------------

//create a blue LineBasicMaterial
var material = new THREE.LineBasicMaterial( { color: 0x0000ff } );

/*
125版本就不再支持这个api了，如果还需要就用他的子类BufferGeometry。
var geometry = new THREE.Geometry();
geometry.vertices.push(new THREE.Vector3( -10, 0, 0) );
geometry.vertices.push(new THREE.Vector3( 0, 10, 0) );
geometry.vertices.push(new THREE.Vector3( 10, 0, 0) );
*/
//这里用这个构造
const geometry = new THREE.BufferGeometry()
const pointsArray = new Array()
//加2000个顶点，范围为-1到1
for(let i = 0;i<2000;i++){
const x = Math.random() * 2 - 1 //范围在-1到1
const y = Math.random() * 2 - 1
const z = Math.random() * 2 - 1
pointsArray.push(new THREE.Vector3(x,y,z))
//顶点
//geometry.vertices.push(new THREE.Vector3(x,y,z))
}
//用这个api传入顶点数组
geometry.setFromPoints(pointsArray)

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

renderer.render( scene, camera );
</script>
</body>
</html>

光影少年

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
three.js 简单画线报错

最后才发现 new THREE.Geometry()；125版本就不再支持这个api了，如果还需要就用他的子类BufferGeometry。125版本就不再支持这个api了，如果还需要就用他的子类BufferGeometry。// 场景-----------------------// 摄像机---------------------// 渲染器--------------------//加2000个顶点，范围为-1到1。//用这个api传入顶点数组。需要更换three.js版本如下。基本得引入都没问题；
复制链接

扫一扫