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?

I'm trying to load a texture on a cube in three.js but

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

1 Expert Approved Answer
Step: 1 Unlock blur-text-image
Question Has Been Solved by an Expert!

Get step-by-step solutions from verified subject matter experts

Step: 2 Unlock
Step: 3 Unlock

Students Have Also Explored These Related Databases Questions!