CODEWITHSUNDEEP
javascripthtmlcssthree.js
Sheldon Ikin
Sheldon Ikin

Reputation: 31

Three.js Geometry isn't showing in browser, but the scene is

was following a tutorial and got the whole scene working in the body tag, then I tried moving it inside a div, and now only the scene will render. I'm not getting any errors, and I've console logged everything to make sure it is available to access. But I can't see why I'm nothing displayed.

// console.log ("Java Script is working!")

// get div for 3D area
const container = document.querySelector('#container')
// console.log (container)
var scene = new THREE.Scene()

var camera = new THREE.PerspectiveCamera(
  75,
  container.innerWidth / container.innerHeight,
  0.1,
  1000
)
camera.position.z = 3

var renderer = new THREE.WebGLRenderer({
  antialias: true
})
renderer.setClearColor('#0D1033')
renderer.setSize(container.innerWidth, container.innerHeight)

container.appendChild(renderer.domElement)

container.addEventListener('resize', () => {
  renderer.setSize(container.innerWidth, container.innerHeight)
  camera.aspect = container.innerWidth / container.innerHeight
  camera.updateProjectionMatrix()
})


var geometry = new THREE.BoxGeometry(10, 1, 1)
var material = new THREE.MeshLambertMaterial({
  color: 0x90e9f9,
  side: THREE.DoubleSide
})
var mesh = new THREE.Mesh(geometry, material)

scene.add(mesh)


var light = new THREE.PointLight(0xffffff, 5, 500)
light.position.set(10, 0, 25)
scene.add(light)

var render = function() {
  requestAnimationFrame(render)
  renderer.render(scene, camera)
}
console.log(mesh)
console.log(camera)

render()
* {
  box-sizing: border-box;
}

body {
  padding: 0;
  margin: 0;
  height: 100vh;
}

canvas {
  display: block;
  height: 100%;
  width: 100%;
}

#container {
  background-color: black;
  height: 100vh;
}
<!DOCTYPE html>

<body>
  <div id="container">

  </div>


  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/102/three.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/TweenMax.min.js"></script>
  <script src="main.js"></script>
</body>

</html>

I'm trying to get this working first so I know this can work before I move it into my main project, where I'm trying to have a 3d space inside a div on the website, but not take up the full page

Upvotes: 3

Views: 153

Answers (1)

Mugen87
Mugen87

Reputation: 31086

You can only use innerWidth and innerHeight on the window object. Use clientWidth and clientHeight instead:

const container = document.querySelector('#container')

const scene = new THREE.Scene()

const camera = new THREE.PerspectiveCamera(
  75,
  container.clientWidth / container.clientHeight,
  0.1,
  1000
)
camera.position.z = 3

const renderer = new THREE.WebGLRenderer({
  antialias: true
})
renderer.setClearColor('#0D1033')
renderer.setSize(container.clientWidth, container.clientHeight)

container.appendChild(renderer.domElement)

container.addEventListener('resize', () => {
  renderer.setSize(container.clientWidth, container.clientHeight)
  camera.aspect = container.clientWidth / container.clientHeight
  camera.updateProjectionMatrix()
})


const geometry = new THREE.BoxGeometry(10, 1, 1)
const material = new THREE.MeshLambertMaterial({
  color: 0x90e9f9,
  side: THREE.DoubleSide
})
const mesh = new THREE.Mesh(geometry, material)
scene.add(mesh)


const light = new THREE.PointLight(0xffffff, 5, 500)
light.position.set(10, 0, 25)
scene.add(light)

const render = function() {
  requestAnimationFrame(render)
  renderer.render(scene, camera)
}

render()
* {
  box-sizing: border-box;
}

body {
  padding: 0;
  margin: 0;
  height: 100vh;
}

canvas {
  display: block;
  height: 100%;
  width: 100%;
}

#container {
  background-color: black;
  height: 100vh;
}
<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/three.min.js"></script>
<div id="container">

</div>

Upvotes: 1

Related Questions