0
구체가 느슨해지면서 ThreeJS의 텍스처에 텍스처를 매핑 할 때. 대신 읽는 consol 오류가 발생합니다. Uncaught TypeError : 정의되지 않은 index.html의 'add'메서드를 호출 할 수 없습니다. 28 및 Cross-Origin 리소스 공유 정책에 의해 원본 이미지 건너 뛰기가 거부되었습니다. 이미지는 텍스처 매핑을 시도하는 다른 인스턴스에서 작동하기 때문에 올바른 크기와 해상도입니다. 그러나 여기서는 작동하지 않습니다. 내가지도를 적용하는 방법에 문제가 있어야합니다. 나는 자바 스크립트와 ThreeJS에 익숙하지 않으므로 나와 함께 감당해야한다. 고맙습니다.ThreeJS의 구체에 텍스처 매핑
<body>
<div id="container"></div>
<script src="javascript/mrdoob-three.js-ad419d4/build/three.js"></script>
<script defer="defer">
// renderer
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// camera
var camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 1, 1000);
camera.position.z = 500;
// material
var material = new THREE.MeshLambertMaterial({
map: THREE.ImageUtils.loadTexture('images/physicalworldmapcolor.jpg')
});
// add subtle ambient lighting
var ambientLight = new THREE.AmbientLight(0x000044);
scene.add(ambientLight);
// directional lighting
var directionalLight = new THREE.DirectionalLight(0xffffff);
directionalLight.position.set(1, 1, 1).normalize();
scene.add(directionalLight);
// scene
var scene = new THREE.Scene();
// sphere
// the first argument of THREE.SphereGeometry is the radius,
// the second argument is the segmentsWidth
// the third argument is the segmentsHeight.
var sphere = new THREE.Mesh(new THREE.SphereGeometry(150, 70, 50),
new THREE.MeshNormalMaterial(material));
sphere.overdraw = true;
scene.add(sphere);
renderer.render(scene, camera);
</script>