원통형을 만들려고하는데 성공하지 못했습니다.three.js - 원통을 만들 수 없습니다.
geometry02 = new THREE.CylinderGeometry(20, 100, 100, 1000);
material02 = new THREE.MeshBasicMaterial({color: 0x0000ff});
cylinder02 = new THREE.Mesh(geometry02, material02);
cylinder02.position.x = 300;
scene.addObject(cylinder02);
내가 뭔가를 포함 잊고 : 이 내 코드?
방금 게시 한 스 니펫에는 아무런 문제가 없습니다. 예제에 붙여 넣으면 괜찮은지 확인할 수 있습니다.
확인 있는지 확인하십시오
보조 메모로 segmentsRadius 매개 변수 (1000)를 더 작은 값으로 줄이는 것이 좋습니다. 더 적은 정점 /면을 사용하여 비슷한 모양/레벨 세부 사항을 얻을 수 있습니다.
바로 ... 다시! :-) – BorisD
코드
<!DOCTYPE html>
<html lang="en">
<head>
<title>3d cylinder</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
font-family: Monospace;
background-color: #f0f0f0;
margin: 0px;
overflow: hidden;
}
</style>
</head>
<body>
<script src="three.min.js" type="text/javascript"></script>
<script src="Stats.js" type="text/javascript"></script>
<script src="Detector.js" type="text/javascript"></script>
<script>
if (! Detector.webgl) Detector.addGetWebGLMessage();
var container, stats;
var camera, scene, renderer, light;
var cylinder, line, geometry;
var targetRotation = 0;
var targetRotationOnMouseDown = 0;
var mouseX = 0;
var mouseXOnMouseDown = 0;
var windowHalfX = window.innerWidth/2;
var windowHalfY = window.innerHeight/2;
init();
animate();
function init() {
container = document.createElement('div');
document.body.appendChild(container);
var info = document.createElement('div');
info.style.position = 'absolute';
info.style.top = '10px';
info.style.width = '100%';
info.style.textAlign = 'center';
//info.innerHTML = 'Drag to spin the cylinder';
container.appendChild(info);
// camera
camera = new THREE.PerspectiveCamera(60, window.innerWidth/window.innerHeight, 1, 20000);
camera.position.y = 100;
camera.position.z = 800;
// scene
scene = new THREE.Scene();
// light
scene.add(new THREE.AmbientLight(0x404040));
light = new THREE.DirectionalLight(0xffffff);
light.position.set(0, 1, 0);
scene.add(light);
// texture
var map = THREE.ImageUtils.loadTexture('ash_uvgrid01.jpg');
map.wrapS = map.wrapT = THREE.RepeatWrapping;
map.anisotropy = 16;
materials = [
new THREE.MeshLambertMaterial({ ambient: 0xbbbbbb, map: map, side: THREE.DoubleSide }),
new THREE.MeshBasicMaterial({ color: 0xffffff, wireframe: true, transparent: true, opacity: 0.1, side: THREE.DoubleSide })
];
// Grid
geometry = new THREE.Geometry();
geometry.vertices.push(new THREE.Vector3(- 500, 0, 0));
geometry.vertices.push(new THREE.Vector3(500, 0, 0));
for (var i = 0; i <= 20; i ++) {
line = new THREE.Line(geometry, new THREE.LineBasicMaterial({ color: 0x000000, opacity: 0.2 }));
line.position.z = (i * 50) - 500;
scene.add(line);
line = new THREE.Line(geometry, new THREE.LineBasicMaterial({ color: 0x000000, opacity: 0.2 }));
line.position.x = (i * 50) - 500;
line.rotation.y = 90 * Math.PI/180;
scene.add(line);
}
// cylinder
cylinder = THREE.SceneUtils.createMultiMaterialObject(new THREE.CylinderGeometry(50, 50, 200, 25, 10, false), materials);
cylinder.overdraw = true;
scene.add(cylinder);
// renderer
renderer = new THREE.CanvasRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
container.appendChild(renderer.domElement);
// stats
stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.top = '0px';
container.appendChild(stats.domElement);
document.addEventListener('mousedown', onDocumentMouseDown, false);
document.addEventListener('touchstart', onDocumentTouchStart, false);
document.addEventListener('touchmove', onDocumentTouchMove, false);
window.addEventListener('resize', onWindowResize, false);
}
function onWindowResize() {
camera.left = window.innerWidth/- 2;
camera.right = window.innerWidth/2;
camera.top = window.innerHeight/2;
camera.bottom = window.innerHeight/- 2;
camera.aspect = window.innerWidth/window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
function onDocumentMouseDown(event) {
event.preventDefault();
document.addEventListener('mousemove', onDocumentMouseMove, false);
document.addEventListener('mouseup', onDocumentMouseUp, false);
document.addEventListener('mouseout', onDocumentMouseOut, false);
mouseXOnMouseDown = event.clientX - windowHalfX;
targetRotationOnMouseDown = targetRotation;
}
function onDocumentMouseMove(event) {
mouseX = event.clientX - windowHalfX;
targetRotation = targetRotationOnMouseDown + (mouseX - mouseXOnMouseDown) * 0.02;
}
function onDocumentMouseUp(event) {
document.removeEventListener('mousemove', onDocumentMouseMove, false);
document.removeEventListener('mouseup', onDocumentMouseUp, false);
document.removeEventListener('mouseout', onDocumentMouseOut, false);
}
function onDocumentMouseOut(event) {
document.removeEventListener('mousemove', onDocumentMouseMove, false);
document.removeEventListener('mouseup', onDocumentMouseUp, false);
document.removeEventListener('mouseout', onDocumentMouseOut, false);
}
function onDocumentTouchStart(event) {
if (event.touches.length === 1) {
event.preventDefault();
mouseXOnMouseDown = event.touches[ 0 ].pageX - windowHalfX;
targetRotationOnMouseDown = targetRotation;
}
}
function onDocumentTouchMove(event) {
if (event.touches.length === 1) {
event.preventDefault();
mouseX = event.touches[ 0 ].pageX - windowHalfX;
targetRotation = targetRotationOnMouseDown + (mouseX - mouseXOnMouseDown) * 0.05;
}
}
function animate() {
requestAnimationFrame(animate);
render();
stats.update();
}
function render() {
cylinder.rotation.y += (targetRotation - cylinder.rotation.y) * 0.05;
renderer.render(scene, camera);
}
</script>
</body>
</html>
당신이하려고하면 어떻게됩니까 아래 시도해보세요? 어떤 종류의 오류 메시지가 나타 납니까? – Tobbe