移除已经绘制的物体3
Removing already drawn object THREE
本文关键字:绘制 更新时间:2023-09-26
我正在尝试为样条观察编写代码。我的问题是,我已经创建了一个菜单,所以我可以在样条之间进行选择,但是当我选择下一个时,即使我试图从场景中删除,之前绘制的样条也不会消失。
<html>
<head>
<title> Brincando </title>
<style>
body { margin: 0; }
canvas { width: 100%; height: 100% }
</style>
</head>
<body>
<script src="js/three.js"></script>
<script src="js/TrackballControls.js"></script>
<script>
var camera, cameraControls,scene,renderer,dropdown,container,info;
var numPoints = 100;
sampleSpline = new THREE.CatmullRomCurve3([
new THREE.Vector3(0, 0, 0),
new THREE.Vector3(0, 200, 0),
new THREE.Vector3(150, 150, 0),
new THREE.Vector3(150, 50, 0),
new THREE.Vector3(250, 100, 0),
new THREE.Vector3(250, 300, 0)
]);
sampleSpline2 = new THREE.CatmullRomCurve3([
new THREE.Vector3(0, 0, 0),
new THREE.Vector3(0, -200, 0),
new THREE.Vector3(-150, -150, 0),
new THREE.Vector3(-150, -50, 0),
new THREE.Vector3(-250, -100, 0),
new THREE.Vector3(-250, -300, 0)
]);
sampleSpline.type='catmullrom';
sampleSpline2.type='catmullrom';
var splines ={
sampleSpline: sampleSpline,
sampleSpline2: sampleSpline2
};
var dropdown = '<select id="dropdown" onchange="addSpline(this.value)">';
var s;
for ( s in splines ) {
dropdown += '<option value="' + s + '"';
dropdown += '>' + s + '</option>';
}
dropdown += '</select>';
function addSpline(){
var value = document.getElementById('dropdown').value;
var selectspline = splines[value];
if(line)
{
scene.remove(line);
}
var material = new THREE.LineBasicMaterial({
color: 0xff00f0,
});
var geometry = new THREE.Geometry();
var splinePoints = selectspline.getPoints(numPoints);
for(var i = 0; i < splinePoints.length; i++)
{
geometry.vertices.push(splinePoints[i]);
}
var line = new THREE.Line(geometry, material);
scene.add(line);
}
init();
animate();
function init()
{
container = document.createElement('div');
document.body.appendChild(container);
info = document.createElement('div');
info.style.position = 'absolute';
info.style.top = '10px';
info.style.width = '100%';
info.style.textAlign = 'center';
info.innerHTML = dropdown;
container.appendChild(info);
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth,window.innerHeight);
document.body.appendChild( renderer.domElement );
camera = new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,0.1,10000);
camera.position.z= 700;
cameraControls = new THREE.TrackballControls(camera,renderer.domElement)
cameraControls.rotateSpeed = 5.0;
cameraControls.zoomSpeed = 1.0;
cameraControls.noZoom = false;
cameraControls.noPan = true;
cameraControls.staticMoving = true;
cameraControls.dynamicDampingFactor = 0.3;
cameraControls.addEventListener('change',render);
scene = new THREE.Scene();
camera.lookAt(scene.position);
addSpline();
renderer.setClearColor(0xdddddd, 1);
window.addEventListener( 'resize', onWindowResize, false );
render();
}
function onWindowResize()
{
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
cameraControls.handleResize();
render();
}
function animate()
{
requestAnimationFrame( animate );
cameraControls.update();
}
function render()
{
renderer.render( scene, camera );
}
</script>
</body>
</html>
您的line
变量是addSpline
函数的本地变量,
if(line)
{
scene.remove(line);
}
将始终将line视为未定义,将line变量声明移动到其他全局变量
var camera, cameraControls, scene, renderer, dropdown, container,info,
line;
并从函数
中删除var声明var line = new THREE.Line(geometry, material);
您还应该处理材料,不要过度使用全局变量等,但这超出了这个问题的范围
相关文章:
- D3在一个调用中绘制不同的SVG形状,没有可见性
- 有没有一个javascript图形绘制库可以进行气球树布局
- 使用相同的数据集绘制各种符号
- 使用onclick绘制SVG路径
- 在谷歌地图上绘制位置数据库
- 用chart.js绘制条形图
- “可绘制地图”设置地图选项“纬度-经度”
- 多维数据集网格未在指定的分区中绘制
- 使用谷歌图表在x轴上绘制日期
- 使用fabric.js从矩形区域获取对象,并将该区域绘制到画布上
- 如何在React Native中绘制图形
- 画布中绘制的矩形区域的弹出工具提示
- 如何在OpenLayers中获取动态绘制的多边形的坐标
- 画布:逐像素绘制图像并请求动画帧计时
- D3从嵌套的JSON中绘制第二个圆环图
- 如何用d3.js绘制折线图
- 在WebGL中绘制多个二维图像
- JSXGraph:如何绘制带有箭头和无点标记的矢量
- 用图像而不是颜色填充对象(将图像绘制到画布上)
- 如何在运行时在HTML5画布中绘制正方形