First Crack at Blender Doughnut

About This

I spent some time today trying to learn Blender.

Blender is a community project coordinated by the Blender Foundation, primarily funded by donations. At its core is the Blender software, to which thousands of people have contributed, and that millions use daily. [The mission of Blender is to ] get the world's best 3D CG technology in the hands of artists as free/open source software.

Blender is the free and open source 3D creation suite. It supports the entirety of the 3D pipeline - modeling, rigging, animation, simulation, rendering, compositing and motion tracking, even video editing and game asset creation. Advanced users employ Blender's API for Python scripting to customize the application and write specialized tools.

I wanted to learn Blender because I want to create assets for 3D games that I hope to host on this site in the future. I also think there are a lot of educational opportunities, using a combination of Three.js and Blender to communicate some science and engineering topics.

To learn some Blender today, I started going through the YouTube tutorial series seen below. I only got through Part 7 today, and just wanted to upload what I have to this site today.

For some reason, the design below doesn't quite match what I had created in Blender. In Blender, my doughnuts look like this:

But, as you can see from the Three.js scene below, my doughnuts do not look like the above. Something went wrong when exporting the scene from Blender and importing to Three.js. Notably, the sprinkles are gone and the icing doesn't quite look right. In the end, the doughnut scene that the tutorial is teaching you how to create is supposed to look like this:

I will probably re-upload the final doughnut when I finish the tutorial and when I have figured out what is going wrong exporting from Blender / importing to Three.js.

My Current Method for Exporting From Blender and Importing to Three.js

1. Export the scene from Blender as a glTF binary.
2. 1. Make sure to include the camera and lighting.
2. Import the scene to the Three.js Editor, and edit the lighting of the scene so that the scene appears somewhat like what the scene looks like in Blender.
3. Export the scene from the Three.js editor as a GLTF file.
4. Import the scene into three.js in the browser using the GLTFLoader, and center the scene in the view of the camera using the code below:

const assetLoader = new GLTFLoader();
assetLoader.load(ASSET_URL,function(gltf ) {
    const model = gltf.scene;
    scene.add(model);

    // Compute bounding box
    const box = new THREE.Box3().setFromObject(model);
    const center = new THREE.Vector3();
    const size = new THREE.Vector3();
    box.getCenter(center);
    box.getSize(size);

    // Center the model
    model.position.sub(center);

    // Frame the model
    const maxDim = Math.max(size.x, size.y, size.z);
    const fov = camera.fov * (Math.PI / 180);
    let cameraZ = maxDim / (2 * Math.tan(fov / 2));

    camera.position.set(0, 0, cameraZ * 1.5); // Add margin
    camera.lookAt(0, 0, 0);

    orbit.target.set(0, 0, 0);
    orbit.update();

  },undefined,function(error) {
    console.error(error);
  });