Okay
  Public Ticket #2558963
Understanding your code
Closed

Comments

  • Techmantle started the conversation

    Im trying to understand how I can keep the same threejs effects but change the animal head to a different animal head.

  •  16
    Nick replied

    Hi,

    We're using a 3D object for this that has been converted to .json. You can find the object loaded in your `object-loader.js` file.

    loader.load( '3d/deer.js', function ( geometry ) {
                mesh = new THREE.Mesh( geometry, new THREE.MeshPhongMaterial( { color: 0xffffff, overdraw: 0.5 } ) );
                mesh.position.y = 20;
                mesh.scale.set(2.9,2.9,2.9);
                scene.add( mesh );
            } );
    

    What we've done is converted a 3D .obj file to .json for this to work - but you can export straight from most 3D software apps into .json too


    aetherthemes

  • Techmantle replied

    Hey, So I have a .obj 3D file that I would like to replace with the dark deer image, can you instruct me on how I can go about doing this? I have a Robot dog 3D model its rendered in .obj is there a way I can convert it to .json and add that with file to replace the deer .obj. I would like to keep the same settings of the current deer such as the colors.

  • Techmantle replied

    Hey Aether,

    So I have my .obj file converted to .json, where can i replace the deer into this 3D dog I have.

  •  16
    Nick replied

    Hey, you need to add the new JS file in the `3d` folder in your root. You can either replace the deer.js with it or add a new one and reference the change in your `js/3d/object-loader.js` here (on line 50):

    loader = new THREE.JSONLoader();
            loader.load( '3d/deer.js', function ( geometry ) {
                mesh = new THREE.Mesh( geometry, new THREE.MeshPhongMaterial( { color: 0xffffff, overdraw: 0.5 } ) );
                mesh.position.y = 20;
                mesh.scale.set(2.9,2.9,2.9);
                scene.add( mesh );
            } );
    

    You can see how we load the deer.js from a specific location and set the Y position and scale in this code. You may need to update those values as well to fit with the scale of your object.


    aetherthemes