Question 306503 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Can't get canvas of threejs next to a div

im making a shoe customizer and im having trouble with placing my canvas (of threejs) next to my div (the shoe customizer), i made a post asking the same question, but it didn’t get resolved, i did adapt a few things based on the answers, but now the canvas is on top of the div, instead of next to it. PLEASE help.

Main question is: how do i get my canvas-container next to the customizer-container

html

  <body>
    <img class="logo-image" src="/public/SWEAR-logo.png" alt="SWEAR logo">
    <div class="wrapper">
      <div class="canvas-container"></div>
        <div class="customizer-container">
          <img id="close-window" src="/public/close.png" alt="close-window">
          <h1 id="name"></h1>
          <div class="color-palette-container">
                <p>Colors</p>
                <div id="color-palette-laces">
                    <div><div class="box red" style="background-color: red;"></div> Red </div>
                    <div><div class="box green" style="background-color: green;"></div> Green </div>
                    <div><div class="box blue" style="background-color: blue;"></div> Blue </div>
                    <div><div class="box yellow" style="background-color: yellow;"></div> Yellow </div>
                    <div><div class="box purple" style="background-color: purple;"></div> Purple </div>
                    <div><div class="box pink" style="background-color: pink;"></div> Pink </div>
                </div>

                <div id="color-palette-sole">
                  <div><div class="box red" style="background-color: red;"></div> Red </div>
                  <div><div class="box green" style="background-color: green;"></div> Green </div>
                  <div><div class="box blue" style="background-color: blue;"></div> Blue </div>
                  <div><div class="box yellow" style="background-color: yellow;"></div> Yellow </div>
                  <div><div class="box purple" style="background-color: purple;"></div> Purple </div>
                  <div><div class="box pink" style="background-color: pink;"></div> Pink </div>
              </div>
                  
                <div id="color-palette-sole-top">
                  <div><div class="box red" style="background-color: red;"></div> Red </div>
                  <div><div class="box green" style="background-color: green;"></div> Green </div>
                  <div><div class="box blue" style="background-color: blue;"></div> Blue </div>
                  <div><div class="box yellow" style="background-color: yellow;"></div> Yellow </div>
                  <div><div class="box purple" style="background-color: purple;"></div> Purple </div>
                  <div><div class="box pink" style="background-color: pink;"></div> Pink </div>
                </div>

                <div id="color-palette-outside1">
                  <div><div class="box red" style="background-color: red;"></div> Red </div>
                  <div><div class="box green" style="background-color: green;"></div> Green </div>
                  <div><div class="box blue" style="background-color: blue;"></div> Blue </div>
                  <div><div class="box yellow" style="background-color: yellow;"></div> Yellow </div>
                  <div><div class="box purple" style="background-color: purple;"></div> Purple </div>
                  <div><div class="box pink" style="background-color: pink;"></div> Pink </div>
                </div>

                <div id="color-palette-outside2">
                  <div><div class="box red" style="background-color: red;"></div> Red </div>
                  <div><div class="box green" style="background-color: green;"></div> Green </div>
                  <div><div class="box blue" style="background-color: blue;"></div> Blue </div>
                  <div><div class="box yellow" style="background-color: yellow;"></div> Yellow </div>
                  <div><div class="box purple" style="background-color: purple;"></div> Purple </div>
                  <div><div class="box pink" style="background-color: pink;"></div> Pink </div>
                </div>

                <div id="color-palette-outside3">
                  <div><div class="box red" style="background-color: red;"></div> Red </div>
                  <div><div class="box green" style="background-color: green;"></div> Green </div>
                  <div><div class="box blue" style="background-color: blue;"></div> Blue </div>
                  <div><div class="box yellow" style="background-color: yellow;"></div> Yellow </div>
                  <div><div class="box purple" style="background-color: purple;"></div> Purple </div>
                  <div><div class="box pink" style="background-color: pink;"></div> Pink </div>
                </div>

                <div id="color-palette-inside">
                  <div><div class="box red" style="background-color: red;"></div> Red </div>
                  <div><div class="box green" style="background-color: green;"></div> Green </div>
                  <div><div class="box blue" style="background-color: blue;"></div> Blue </div>
                  <div><div class="box yellow" style="background-color: yellow;"></div> Yellow </div>
                  <div><div class="box purple" style="background-color: purple;"></div> Purple </div>
                  <div><div class="box pink" style="background-color: pink;"></div> Pink </div>
                </div>


                  <p>Fabrics</p>
                  <div id="color-fabrics-laces">
                      <div><div class="box-fabric plastic" style="background-color: red;"></div> Plastic </div>
                      <div><div class="box-fabric metallic" style="background-image: url('/textures/metallic.jpg');"></div> Metallic </div>
                      <div><div class="box-fabric polyester" style="background-image: url('/textures/polyester.jpg');"></div> Polyester </div>
                      <div><div class="box-fabric leather" style="background-color: yellow;"></div> Leather </div>
                  </div>
              </div>

              <div class="size-container">
              <label for="size">Size</label>
                <select name="size" id="size">
                  <option value="" disabled selected>Select</option>
                  <option value="size-36">36</option>
                  <option value="size-37">37</option>
                  <option value="size-38">38</option>
                  <option value="size-39">39</option>
                  <option value="size-40">40</option>
                  <option value="size-41">41</option>
                  <option value="size-42">42</option>
                </select>
              </div>
              
            <button id="orderButton" disabled>Order now</button>
        </div>
      </div>
    <script type="module" src="/main.js"></script>
  </body>

css

body {
  margin: 0;
  text-align: center;
  font-family: 'Helvetica', sans-serif;
  text-transform: uppercase;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.wrapper {
  display:flex;
  width: 100%
}

.customizer-container{
  width: 500px; 
  height:100vh;
  background-color: black;
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.canvas-container {
  flex: 1;
  height: 100vh;
  position: relative;
}

javascript

const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
const canvas = document.querySelector('.canvas-container');
canvas.appendChild(renderer.domElement);

what it looks like right now:
enter image description here

so now they are stacked on top of eachother, but i want them side by side (canvas on the left, and customizer on the right), without the canvas being compressed

Link to full code: https://github.com/milanaismail/sneaker

Tags:

2

Answers


  1. 0

    I can’t see any canvas tag from your code.
    You can render the 3D models in canvas tag only not on div tag.
    So you can try like this.

    Login or Signup to reply.
  2. 0

    look at this

    body {
      margin: 0;
      text-align: center;
      font-family: 'Helvetica', sans-serif;
      text-transform: uppercase;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }

    .wrapper {
      display: flex;
      width: 100%;
    }
    
    .canvas-container, .customizer-container {
      width: 50%;
      height: 100vh;
      position: relative;
    }

    .customizer-container {
      background-color: red;
      color: white;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
     }

    .canvas-container {
      flex: 1;
      height: 100%;
      position: relative;
    }
    .color-palette-container,
    .size-container {
      margin-top: 20px;
    }

    .size-container {
      margin-top: auto;
      margin-bottom: 20px;
    }
    #orderButton {
      margin-top: 20px;
      margin-bottom: 20px;
    }
    <div class="wrapper">
    <div class="canvas-container"></div>
    <div class="customizer-container">
      <h1 id="name">Customizer</h1>
      <div class="color-palette-container">
        <p>Colors</p>
        <!-- Color palettes go here -->
      </div>
      <div class="color-palette-container">
        <p>Fabrics</p>
        <!-- Fabric options go here -->
      </div>
      <div class="size-container">
        <label for="size">Size</label>
        <select name="size" id="size">
          <option value="" disabled selected>Select</option>
          <option value="size-36">36</option>
          <option value="size-37">37</option>
          <option value="size-38">38</option>
          <option value="size-39">39</option>
          <option value="size-40">40</option>
          <option value="size-41">41</option>
          <option value="size-42">42</option>
        </select>
      </div>
      <button id="orderButton" disabled>Order now</button>
    </div>
  </div>
  
  <script type="importmap">
  {
    "imports": {
      "three": "https://unpkg.com/[email protected]/build/three.module.js",
      "three/addons/": "https://unpkg.com/[email protected]/examples/jsm/"
    }
  }
</script>

  <script type="module">
    import * as THREE from 'three';
    import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

    const scene = new THREE.Scene();
  const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
  const renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  const canvasContainer = document.querySelector('.canvas-container');
  canvasContainer.appendChild(renderer.domElement);

  const icosahedronGeometry = new THREE.IcosahedronGeometry(1, 0);
  const diamondMaterial = new THREE.MeshStandardMaterial({ color: 0x00FFFF });
  const diamond = new THREE.Mesh(icosahedronGeometry, diamondMaterial);
  diamond.position.x = -3;
  scene.add(diamond);

  const controls = new OrbitControls(camera, renderer.domElement);
  controls.enableDamping = true;
  controls.enabled = true;

  const dL = new THREE.DirectionalLight(0xFFFFFF, 1);
  dL.position.set(1, 1, 1).normalize();
  scene.add(dL);

  camera.position.z = 5;

  const rotationSpeed = 0.002;

  function animate() {
    requestAnimationFrame(animate);
    diamond.rotation.x += rotationSpeed;
    diamond.rotation.y += rotationSpeed;
    controls.update();
    renderer.render(scene, camera);
  }

  animate();

  window.addEventListener('resize', () => {
    const newWidth = window.innerWidth;
    const newHeight = window.innerHeight;
    camera.aspect = newWidth / newHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(newWidth, newHeight);
  });
  </script>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search