홈>
three.js를 사용하여"제곱"과"구체"의 두 가지 모양을 사용하여 다음을 시도하고 있습니다.
각 객체에는 연관된 버튼이 있습니다. 사용자가 버튼을 클릭하면 해당 모양이 장면에 추가되지만 장면에는 한 번에 1 개의 사각형과 1 개의 구만있을 수 있습니다.
사용자가 새로운 사각형을 추가하면 이전 사각형을 대체해야합니다. 아래 코드 에서이 작업을 수행하는 데 문제가있는 것 같습니다. 현재 사각형 및 구 개체를 성공적으로 추가 할 수 있지만 다른 사각형을 추가하기 위해 클릭하면 현재 사각형이 바뀌지 않습니다.
고맙습니다, 감사합니다!
<html>
<head>
<title>My second three.js app</title>
<style>
body { margin: 0; }
canvas { width: 100%; height: 100% }
</style>
</head>
<body>
<button id="button1">Square1</button>
<button id="button2">Square2</button>
<button id="button3">Sphere</button>
<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 );
loader.load( ‘square1.glb’, function ( geometry ) {
geometry.scene.traverse( function ( node ) {
if ( node.isMesh ){
square = node;
square.material.map.anisotropy = maxAnisotropy;
}
document.getElementById("button1").addEventListener("click", function(){
scene.remove(square);
scene.add(square);
});
});
loader.load( ‘square2.glb’, function ( geometry ) {
geometry.scene.traverse( function ( node ) {
if ( node.isMesh ){
square = node;
square.material.map.anisotropy = maxAnisotropy;
}
document.getElementById("button2").addEventListener("click", function(){
scene.remove(square);
scene.add(square);
});
});
loader.load( ‘sphere.glb’, function ( geometry ) {
geometry.scene.traverse( function ( node ) {
if ( node.isMesh ){
sphere = node;
sphere.material.map.anisotropy = maxAnisotropy;
}
document.getElementById("button3").addEventListener("click", function(){
scene.add(sphere);
});
});
var animate = function () {
requestAnimationFrame( animate );
renderer.render( scene, camera );
};
animate();
</script>
</body>
</html>
-
답변 # 1
관련 자료
- javascript - threejs - css3drenderer 장면에서 dom 개체를 가져 오는 방법은 무엇입니까?
- python - Pandas DataFrame에`groupby`를 적용 할 때 Counter 객체 추가
- three.js - ThreeJS에서 장면에 색조를 추가 할 수 있습니까?
- javascript - Threejs 장면에서 3D 텍스트를 만들 수 없습니다
- python - 사이클에서 파일에 사용자 정의 객체를 계속 추가하는 방법이 필요합니다
- python - 변형이있는 장면에서 모든 메시 오브젝트 선택
- three.js - 텍스처가있는 ThreeJS 장면, 왜 toDataUrl이 검은 색 JPG를 반환합니까?
- c# - 소유 한 객체 모음 추가
- javascript - threejs - 메모리에 장면을 올바르게 배치하는 방법
<button>
의 범위 밖에서 "현재 사각형"모양을 추적하는 것을 고려하십시오 핸들러를 클릭하여scene
에서 이러한 모양을 추가하고 제거하는 논리를 확인하십시오. 예상대로 작동합니다.구체적으로, 당신은
scene.remove()
를 호출 할 것입니다 나중에scene.add()
라고하는 모양 객체로 호출하지 않고 현재 사각형 모양 (있는 경우)으로 포함 :다음과 같이 스크립트를 수정하는 것이 유용 할 것입니다 :
이것이 도움이되기를 바랍니다!