Threejs is bad quality via using "Import via modules" - Questions

link管理
链接快照平台
输入网页链接，自动生成快照
标签化管理网页链接
相关文章推荐
乖乖的小摩托 · 贵州中三叠世早期幻龙属(Nothosauru ...· 1 月前 ·
细心的鼠标垫 · 24P2C 23.8" IPS ...· 2 月前 ·
发怒的红薯 · 如何在 Ubuntu 20.04 上安装 ...· 7 月前 ·
眼睛小的酸菜鱼 · 字节数组编码/解码 - 锤子在线工具· 7 月前 ·
体贴的煎饼 · First time college ...· 8 月前 ·
When I introduced threejs using traditional html，Browser shows a very high quality.
and it like this:
But，When I introduced threejs using npm modules and webpack，Browser shows a very low quality.
just like this
this is my code
// import * as THREE from 'three';
import {
  Scene,
  AxesHelper,
  PlaneGeometry,
  MeshBasicMaterial,
  MeshLambertMaterial,
  Mesh,
  SphereGeometry,
  CubeGeometry,
  SpotLight,
  PerspectiveCamera,
  WebGLRenderer,
  Color} from '../threejs/build/three.module';
// import THREE from '../libs/three'
import $ from 'jquery';
// jq常用代码，dom加载完毕执行
  // 定义实例场景
  var scene = new Scene();
   * 设定辅助坐标轴
  var axes = new AxesHelper( 20 ); 
  scene.add(axes);
   * 设定一个 基面
   * PlaneGeometry(红轴,蓝轴,绿轴)
   * MeshBasicMaterial({基面的颜色,等等}) 可以改纹理等等。
   * 文档地址 https://threejs.org/docs/#api/materials/MeshBasicMaterial
  // 不可反射面
  // var planeGeometry = new THREE.PlaneGeometry(60,60);
  // var planeMaterial = new THREE.MeshBasicMaterial({color: 0xcccccc});
  // var plane = new THREE.Mesh(planeGeometry,planeMaterial);
  // // 设置坐标
  // plane.rotation.x=-0.5*Math.PI;
  // plane.position.x=15
  // plane.position.y=0
  // plane.position.z=0
  // // 将plane挂载到场景
  // scene.add(plane);
  // 可反射面
  var planeGeometry = new PlaneGeometry(60,50);
  var planeMaterial =    new MeshLambertMaterial({color: "#ffffff"});
  var plane = new Mesh(planeGeometry,planeMaterial);
  plane.receiveShadow  = true;
  // rotate and position the plane
  plane.rotation.x=-0.5*Math.PI;
  plane.position.x=15
  plane.position.y=0
  plane.position.z=0
  // add the plane to the scene
  scene.add(plane);
  // 创建一个方块
  var cubeGeometry = new CubeGeometry(4,4,4);//长宽高
  var cubeMaterial = new MeshBasicMaterial({color: "#ff0000", wireframe: true});//同上
  var cube = new Mesh(cubeGeometry, cubeMaterial);
  // 设置坐标
  cube.position.x=-4;
  cube.position.y=3;
  cube.position.z=0;
  // 挂载到场景
  scene.add(cube);
  // 创建一个球 
  var sphereGeometry = new SphereGeometry(4,20,20);
  var sphereMaterial = new MeshBasicMaterial({color: 0x7777ff, wireframe: true});
  var sphere = new Mesh(sphereGeometry,sphereMaterial);
  // position the sphere
  sphere.position.x=20;
  sphere.position.y=4;
  sphere.position.z=2;
  // add the sphere to the scene
  scene.add(sphere);
  // 创建一个能反射光源的球
  var sphereGeometry = new SphereGeometry(4,20,20);
  var sphereMaterial = new MeshLambertMaterial({color: 0x7777ff});
  var sphere = new Mesh(sphereGeometry,sphereMaterial);
  // position the sphere
  sphere.position.x=20;
  sphere.position.y=4;
  sphere.position.z=10;
  sphere.castShadow=true;
  // add the sphere to the scene
  scene.add(sphere);
  var camera = new PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
  // 相机位置
  camera.position.x = -40;
  camera.position.y = 40;
  camera.position.z = 40;
  camera.lookAt(scene.position);
   * 定义渲染器，常用思路
   * setClearColorHex, 设定背景颜色,0xEEEEEE为灰色
   * setSize, 设定渲染器的的渲染范围(window指的是dom还是视窗？)
  var renderer = new WebGLRenderer();
  renderer.setClearColor(new Color(0xEEEEEE));
  renderer.setSize(window.innerWidth, window.innerHeight);
  // 起动灯光效果
  // renderer.shadowMapEnabled = true;
  renderer.shadowMapAutoUpdate = true;
  // render the scene
  renderer.render(scene, camera);
  // 挂载到实例
  $("#app").append(renderer.domElement);
so what should i do
              Looks like renderer.setSize(window.innerWidth, window.innerHeight); isn’t being executed at the right time.
Try adding this to your page:
$(window).on('resize', () => {
    renderer.setSize(window.innerWidth, window.innerHeight);
When creating an instance of WebGLRenderer, do this:
var renderer = new WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
This will enable MSAA and also sharpen the scene for HiDPI displays (it effectively increases the size of the drawing buffer).
              OK，This is my previous code，I am still a noob.

The code is from < learning three.js The JavaScript 3D Library for WebGL -jos dirksen >
And Browser shows a very high quality.

Just take a look at this code, do not be serious 
<!DOCTYPE html>
<html lang="zh">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <script src="../libs/jquery-1.9.0.js"></script>
  <script src="../libs/three.js"></script>
  <script src="../libs/stats.js"></script>
  <title>Three.js-Static</title>
</head>
  <div id="Stats-output"></div>
  <div id="app"></div>
  <script>
    // jq常用代码，dom加载完毕执行
    $(function(){
      // 定义实例场景
      var scene = new THREE.Scene();
       * 设定辅助坐标轴
      var axes = new THREE.AxisHelper( 20 ); 
      scene.add(axes);
       * 设定一个 基面
       * PlaneGeometry(红轴,蓝轴,绿轴)
       * MeshBasicMaterial({基面的颜色,等等}) 可以改纹理等等。
       * 文档地址 https://threejs.org/docs/#api/materials/MeshBasicMaterial
      // 不可反射面
      // var planeGeometry = new THREE.PlaneGeometry(60,60);
      // var planeMaterial = new THREE.MeshBasicMaterial({color: 0xcccccc});
      // var plane = new THREE.Mesh(planeGeometry,planeMaterial);
      // // 设置坐标
      // plane.rotation.x=-0.5*Math.PI;
      // plane.position.x=15
      // plane.position.y=0
      // plane.position.z=0
      // // 将plane挂载到场景
      // scene.add(plane);
      // 可反射面
      var planeGeometry = new THREE.PlaneGeometry(60,50);
      var planeMaterial =    new THREE.MeshLambertMaterial({color: "#ffffff"});
      var plane = new THREE.Mesh(planeGeometry,planeMaterial);
      plane.receiveShadow  = true;
      // rotate and position the plane
      plane.rotation.x=-0.5*Math.PI;
      plane.position.x=15
      plane.position.y=0
      plane.position.z=0
      // add the plane to the scene
      scene.add(plane);
      // 创建一个方块
      var cubeGeometry = new THREE.CubeGeometry(4,4,4);//长宽高
      var cubeMaterial = new THREE.MeshBasicMaterial({color: "#ff0000", wireframe: true});//同上
      var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
      // 设置坐标
      cube.position.x=-4;
      cube.position.y=3;
      cube.position.z=0;
      // 挂载到场景
      scene.add(cube);
      // 创建一个球 
      var sphereGeometry = new THREE.SphereGeometry(4,20,20);
      var sphereMaterial = new THREE.MeshBasicMaterial({color: 0x7777ff, wireframe: true});
      var sphere = new THREE.Mesh(sphereGeometry,sphereMaterial);
      // position the sphere
      sphere.position.x=20;
      sphere.position.y=4;
      sphere.position.z=2;
      // add the sphere to the scene
      scene.add(sphere);
      // 创建一个能反射光源的球
      var sphereGeometry = new THREE.SphereGeometry(4,20,20);
      var sphereMaterial = new THREE.MeshLambertMaterial({color: 0x7777ff});
      var sphere = new THREE.Mesh(sphereGeometry,sphereMaterial);
      // position the sphere
      sphere.position.x=20;
      sphere.position.y=4;
      sphere.position.z=10;
      sphere.castShadow=true;
      // add the sphere to the scene
      scene.add(sphere);
      var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
      // 相机位置
      camera.position.x = -40;
      camera.position.y = 40;
      camera.position.z = 40;
      camera.lookAt(scene.position);
       * 定义渲染器，常用思路
       * setClearColorHex, 设定背景颜色,0xEEEEEE为灰色
       * setSize, 设定渲染器的的渲染范围(window指的是dom还是视窗？)
      var renderer = new THREE.WebGLRenderer();
      renderer.setClearColorHex(0xEEEEEE);
      renderer.setSize(window.innerWidth, window.innerHeight);
      // 起动灯光效果
      renderer.shadowMapEnabled = true;
      // render the scene
      renderer.render(scene, camera);
      // 挂载到实例
      $("#app").append(renderer.domElement);
  </script>
</body>
</html>
              Thanks! But can you please provide the file ../libs/three.js? The posted code does not provide useful insight. The renderer is created without the mentioned antialiasing parameter. And the pixel ratio is not set, too.
BTW: WebGLRenderer does not have a method .setClearColorHex(). Also .shadowMapEnabled should be .shadowMap.enabled. Looks like the code from this book is a little bit deprecated…