Project - iSheji

Posted on | In , ,

Introduction

iSheji is a website that shows the style of decoration designs and guides users to buy the furniture. It contains the home page, the category search page, the design detail page, the 3D panorama page, the designer page and the user page.

image

Technical Challenge

There are some complicated interaction such as click the circle on the picture and add the same product into the shopping cart, show the detail of the design based on its status, implement the 3D panorama.

The 3D panorama is based on the WebGL, but WebGL is a little complicated and inefficient. Thanks to the Three.js, we can use it directly.

There are 3 important elements in Three.js.

  • scene
  • camera
  • renderer

example code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
// get the window's width and height
var width = window.innerWidth
var height = window.innerHeight

// create a scene
var scene = new THREE.Scene()

// create a PerspectiveCamera
var camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 800)

// set the position of camera and let it look at the center of scene
camera.position.x = 10
camera.position.y = 10
camera.position.z = 30
camera.lookAt(scene.position)

// create a WebGL renderer (Three.js also support <canvas>, <svg>, CSS3D renderer)
var renderer = new THREE.WebGLRenderer()

// set the background and size of the renderer
renderer.setClearColor(0xffffff)
renderer.setSize(width, height)

// create a cube
var cubeGeometry = new THREE.BoxGeometry(4, 4, 4)

// create the material
var cubeMaterial = new THREE.MeshBasicMaterial({
    color: 0xff0000
})

// create the mess
var cube = new THREE.Mesh(cubeGeometry, cubeMaterial)

// set the position of cube
cube.position.x = 0
cube.position.y = -2
cube.position.z = 0

// add the cube to the scene
scene.add(cube)

// put the output of renderer into the document body
document.body.appendChild(renderer.domElement)

// render the scene shot by the camera
renderer.render(scene, camera)
PerspectiveCamera

image