What is the best way to incorporate a line into a scene using three.js?

Question

What is the best way to incorporate a line into a scene using three.js?

I am facing an issue with adding a line in three.js. When I call the addline function in my code, the line doesn't appear in the scene. I have tried to implement the MVC design pattern, but I am unsure where I went wrong. Thank you for any assistance provided.
My code snippet is as follows:

function View(viewArea) {
    var viewport = document.getElementById(viewArea);
    var viewportHeight = document.getElementById(viewArea).offsetHeight;
    var viewportWidth = document.getElementById(viewArea).offsetWidth;

    var renderer = new THREE.WebGLRenderer();
    renderer.setSize( viewportWidth, viewportHeight );
    viewport.appendChild(renderer.domElement);

    var scene = new THREE.Scene();
    var camera = new THREE.PerspectiveCamera( 75, viewportWidth / viewportHeight, 0.1, 1000 );
    camera.position.set(100,70,3000);
    camera.lookAt(new THREE.Vector3(0, 0, 0));

    var light = new THREE.PointLight(0xffffff);
    light.position.set(100,100,100);
    scene.add(light);

    this.scene = scene;
    this.camera = camera;
    this.light = light;
    this.renderer = renderer;
}

View.prototype.addLine = function (geometry) {
    var material = new THREE.LineBasicMaterial({ color: 0x000000 });
    var line = new THREE.Line( geometry, material );
    this.scene.add( line );
};

View.prototype.render = function () {
    this.renderer.render(this.scene, this.camera);
};

function Controller(viewArea) {
    var view = new View(viewArea);

    var geometry = new THREE.Geometry();
    geometry.vertices.push( new THREE.Vector3( 0, 0, 0) );
    for(var i=0;i<100;i+=10){
        geometry.vertices.push(
            new THREE.Vector3(i,i+10,i+20)
        );
        view.addLine(geometry);
    }
    view.render();
}

The HTML code snippet is:

<body>
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2" id="leftMenu">
                </div>
                <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8">
                    <div class="row" id="viewport">
                    </div>
                    <div class="row" id="informationMenu">
                    </div>
                </div>
                <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2" id="rightMenu">
                </div>
            </div>
        </div;

    <script type="text/javascript">
        $(document).ready(function(){
             var controller = new Controller('viewport');
        });   
    </script>
</body>

javascript model-view-controller three.js

Answer 1

Answer №1

You are facing two issues with your current setup:

Your line is blending in with the background because they are both black
Your camera is positioned too far away, causing the line to disappear

To fix these problems, make the following adjustments in your code:

To ensure that your line is visible, adjust your camera settings:

var camera = new THREE.PerspectiveCamera( 75, viewportWidth / viewportHeight, 0.1, 5000 );

To change the color of your line to pink, update the following line:

var material = new THREE.LineBasicMaterial({ color: 0xff00ff });

These changes should resolve the issues you are experiencing. I hope this solution works for you.

Additionally, consider optimizing your code by adding the line geometry to your scene only once. Move the view.addLine(geometry) outside of the loop.

function Controller(viewArea) {
    var view = new View(viewArea);

    var geometry = new THREE.Geometry();
    geometry.vertices.push( new THREE.Vector3( 0, 0, 0) );
    for(var i=0;i<100;i+=10){
        geometry.vertices.push(
            new THREE.Vector3(i,i+10,i+20)
        );
    }

    view.addLine(geometry);
    view.render();
}

For a live example, check out this working pen: http://codepen.io/BBlanchard/pen/RKdNoO

Answer 2

You are facing two issues with your current setup:

Your line is blending in with the background because they are both black
Your camera is positioned too far away, causing the line to disappear

To fix these problems, make the following adjustments in your code:

To ensure that your line is visible, adjust your camera settings:

var camera = new THREE.PerspectiveCamera( 75, viewportWidth / viewportHeight, 0.1, 5000 );

To change the color of your line to pink, update the following line:

var material = new THREE.LineBasicMaterial({ color: 0xff00ff });

These changes should resolve the issues you are experiencing. I hope this solution works for you.

Additionally, consider optimizing your code by adding the line geometry to your scene only once. Move the view.addLine(geometry) outside of the loop.

function Controller(viewArea) {
    var view = new View(viewArea);

    var geometry = new THREE.Geometry();
    geometry.vertices.push( new THREE.Vector3( 0, 0, 0) );
    for(var i=0;i<100;i+=10){
        geometry.vertices.push(
            new THREE.Vector3(i,i+10,i+20)
        );
    }

    view.addLine(geometry);
    view.render();
}

For a live example, check out this working pen: http://codepen.io/BBlanchard/pen/RKdNoO

Answer 3

Answer №2

Try implementing something similar to this as it provides a basic example to help you understand.

var renderer, scene, camera, controls;
var geometry, material, line, vertices;
initialize();

function initialize() {
  document.body.style.cssText = 'margin: 0; overflow: hidden;';
  renderer = new THREE.WebGLRenderer({
    alpha: 1,
    antialias: true,
    clearColor: 0xffffff
  });
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);

  scene = new THREE.Scene();
  camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 1, 1000);
  camera.position.set(5, 5, 5);
  controls = new THREE.OrbitControls(camera, renderer.domElement);

  material = new THREE.LineBasicMaterial({
    color: 0x0077ff
  });
  geometry = new THREE.Geometry();
  geometry.vertices.push(new THREE.Vector3(0, 0, 0));

  line = new THREE.Line(geometry, material)

  scene.add(line);
  addLine(); // add line
}

function addLine() {
  vertices = geometry.vertices;
 for(var i=0;i<100;i+=10){
     vertices.push(new THREE.Vector3(i,i+10,i+20));
     }
  geometry = new THREE.Geometry();
  geometry.vertices = vertices;
  scene.remove(line);
  line = new THREE.Line(geometry, material)
  scene.add(line);
  renderer.render(scene, camera);
}

<script src=http://mrdoob.github.io/three.js/build/three.min.js></script>
<script src=http://mrdoob.github.io/three.js/examples/js/controls/OrbitControls.js></script>

Answer 4

Try implementing something similar to this as it provides a basic example to help you understand.

var renderer, scene, camera, controls;
var geometry, material, line, vertices;
initialize();

function initialize() {
  document.body.style.cssText = 'margin: 0; overflow: hidden;';
  renderer = new THREE.WebGLRenderer({
    alpha: 1,
    antialias: true,
    clearColor: 0xffffff
  });
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);

  scene = new THREE.Scene();
  camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 1, 1000);
  camera.position.set(5, 5, 5);
  controls = new THREE.OrbitControls(camera, renderer.domElement);

  material = new THREE.LineBasicMaterial({
    color: 0x0077ff
  });
  geometry = new THREE.Geometry();
  geometry.vertices.push(new THREE.Vector3(0, 0, 0));

  line = new THREE.Line(geometry, material)

  scene.add(line);
  addLine(); // add line
}

function addLine() {
  vertices = geometry.vertices;
 for(var i=0;i<100;i+=10){
     vertices.push(new THREE.Vector3(i,i+10,i+20));
     }
  geometry = new THREE.Geometry();
  geometry.vertices = vertices;
  scene.remove(line);
  line = new THREE.Line(geometry, material)
  scene.add(line);
  renderer.render(scene, camera);
}

<script src=http://mrdoob.github.io/three.js/build/three.min.js></script>
<script src=http://mrdoob.github.io/three.js/examples/js/controls/OrbitControls.js></script>

What is the best way to incorporate a line into a scene using three.js?

Answer №1

Answer №2

Similar questions

Developing an Angular filter using pipes and mapping techniques

The Countdown Timer in React Native triggers an error due to Invariant Violation

Unable to make a div grow within a Popper component in a React.js application

Utilizing JQuery and Jade to extract and display information from a Node.js server

I encountered an issue in reactjs where I received the error message: TypeError: this.state.coords.map is not functioning properly

Violation of Content Security Policy directive has occurred

Using Angular 2 to execute an interface while making an HTTP GET request

Developing a universally accessible variable for utilization in various functions

Accessing each element within a Next.js application through a personalized hook during page load

Having trouble importing cubing.js into my discord bot running on node

The Shopify Pixel Extension has encountered an issue - error code 1

Managing the "Accept Cookies" notification using Selenium in JavaScript

Approach for checking duplicates or empty input fields through PHP, AJAX, and JavaScript

Resizing nested elements while maintaining consistent padding dimensions

Text located in the bottom right corner of the window with the use of JavaScript

Having difficulty incorporating TypeScript into Vue

What could be causing the empty object return from the Async function in my Typescript code on Next JS?

Map checkboxes aren't updating after an array update following a refactor to react hooks

What is the best way to load $cookies into an Angular service?

Steps to ensure a variable remains constant across a controller, JS file, and a rendered partial