Question: I'm trying to load a texture on a cube in three.js but my code is not working. How can i fix this error? var scene
I'm trying to load a texture on a cube in three.js but my code is not working. How can i fix this error?

var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000); camera.position.z = 2; var renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); renderer.setClearColor(0x404040, 1); document.body.appendChild(renderer.domElement);
var cube1 = createCube(); var loader = new THREE.TextureLoader(); var texture = loader.load("./penta.png"); cube1.material.map = texture; scene.add(cube1);
var axes1 = createAxes(10); cube1.add(axes1);
var cube2 = createCube(); cube2.position.x = 1.5; var axes2 = createAxes(10); cube2.add(axes2); cube1.add(cube2);
renderer.render(scene, camera);
var light = new THREE.DirectionalLight(); light.position.z = 1; light.position.x = 1; scene.add(light); var light = new THREE.DirectionalLight(); light.position.z = 1; light.position.x = 1; scene.add(light);
var controls = new THREE.TrackballControls(camera);
//controls.addEventListener('change', animate); var clock = new THREE.Clock(); vx = 0.1; dt = clock.getDelta(); var clock = new THREE.Clock();
var speed = 2; //units a second
var delta = 0;
render();
function render(){
delta = clock.getDelta();
cube1.position.x += delta * Math.sign(Math.sin(Date.now() * 0.001)); // operation with sign is just to make the cube move there and back ;)
renderer.render(scene, camera);
requestAnimationFrame(render); controls.update();
} function createCube(){ var geo = new THREE.BoxGeometry(); var mat = new THREE.MeshLambertMaterial({color:0xffff00}); var mesh = new THREE.Mesh(geo, mat); return mesh; }
function createAxes(Length){ var geometry = new THREE.Geometry(); geometry.vertices.push(new THREE.Vector3(0, 0, 0)); geometry.vertices.push(new THREE.Vector3(length, 0, 0)); geometry.vertices.push(new THREE.Vector3(0, 0, 0)); geometry.vertices.push(new THREE.Vector3(0, length, 0)); geometry.vertices.push(new THREE.Vector3(0, 0, 0)); geometry.vertices.push(new THREE.Vector3(0, 0, length)); geometry.colors.push(new THREE.Color(0xff0000)); geometry.colors.push(new THREE.Color(0xff0000)); geometry.colors.push(new THREE.Color(0xff0000)); geometry.colors.push(new THREE.Color(0xff0000)); geometry.colors.push(new THREE.Color(0xff0000)); geometry.colors.push(new THREE.Color(0xff0000));
var material = new THREE.LineBasicMaterial(); material.vertexColors = THREE.VertexColors;
var axes = new THREE.LineSegments(geometry, material); axes.name = "axes";
return axes; }
Access to Image at 'file:LLD:/Leon/201 has been blocked by CORS policy: Invalid response. Origin 'null' is therefore not allowed access. 1/3D/tutes/penta png from originnullcube.htm:1
Step by Step Solution
There are 3 Steps involved in it
Get step-by-step solutions from verified subject matter experts
