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 spotLight = new SpotLight( 0xffffff );
spotLight.position.set( -40, 60, -10 );
spotLight.castShadow = true;
scene.add( spotLight );
/**
* 定义视角
* PerspectiveCamera函数，(缩放度[1最大,100最小],视角定义[],近视角(?),远视角(?))
*/
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
