我需要使用非常特定的CSS将three.js画布放置在dom中，但是three.js通过设置基于像素的width和height来覆盖其样式每次调整渲染器大小时。
我将其改写回我想要的位置，但是由于这种情况，它通常最终会出现明显的一帧毛刺。
有什么办法让three.js 不是为我决定dom元素的样式吗？
答案 0 :(得分：2)
WebGLRenderer.setSize有一个可选参数 public function getDatatable($slug = 'users')
{
$records = array();
if($slug=='users')
{
$records = User::join('roles', 'users.role_id', '=', 'roles.id')
->select(['users.name','image','email','roles.display_name','roles.name as role_name','login_enabled','role_id',
'slug', 'users.id', 'users.updated_at','users.status'])
->orderBy('users.updated_at', 'desc');
}
elseif($slug =='student')
{
$role = getRoleData($slug);
$records = User::join('roles', 'users.role_id', '=', 'roles.id')
->join('students','students.user_id','=','users.id')
->join('courses','courses.id','=','students.course_id')
->where('roles.id', '=', $role)
->select(['users.id','users.name', 'image','students.roll_no','courses.course_title','students.current_year','students.current_semister', 'email','roles.name as role_name','login_enabled','role_id','users.slug as slug', 'users.updated_at','courses.course_dueration','courses.is_having_semister'])
->orderBy('users.updated_at', 'desc');
}
elseif($slug =='staff')
{
$role = getRoleData($slug);
$records = User::join('roles', 'users.role_id', '=', 'roles.id')
->join('staff','staff.user_id','=','users.id')
->join('courses','courses.id','=','staff.course_parent_id')
->where('roles.id', '=', $role)
->where('users.status', '!=',0)
->select(['users.name', 'image','staff.staff_id','staff.job_title','courses.course_title', 'email','roles.name as role_name','login_enabled','role_id','users.slug as slug', 'users.updated_at','users.status','staff.user_id'])
->orderBy('users.updated_at', 'desc');
}
else {
$role = getRoleData($slug);
$records = User::join('roles', 'users.role_id', '=', 'roles.id')
->where('roles.id', '=', $role)
->select(['users.name', 'image', 'email','roles.name as role_name','login_enabled','role_id','users.slug as slug', 'users.updated_at'])
->orderBy('users.updated_at', 'desc');
}
return Datatables::of($records)
->addColumn('action', function ($records) {
$current_id = '';
$link_data = '<div class="dropdown more">
<a id="dLabel" type="button" class="more-dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="mdi mdi-dots-vertical"></i>
</a>
<ul class="dropdown-menu" aria-labelledby="dLabel">
<li><a href="'.URL_USERS_EDIT.$records->slug.'"><i class="fa fa-pencil"></i>'.getPhrase("edit").'</a></li>
';
if($records->role_name == 'student') {
$link_data .= '
<li ><a href="'.URL_STUDENT_EDIT_PROFILE.$records->slug.'"><i class="fa fa-user" aria-hidden="true"></i>'.getPhrase("admission_details").'</a></li>
<li><a href="'.URL_USER_DETAILS.$records->slug.'"><i class="fa fa-university" aria-hidden="true"></i>'.getPhrase("profile").'</a></li>';
}
if($records->role_name == 'staff') {
$status_name = getPhrase('make_inactive');
if(!$records->status)
$status_name = getPhrase('make_active');
$link_data .= '
<li><a href="'.URL_STAFF_EDIT_PROFILE.$records->slug.'"><i class="fa fa-user" aria-hidden="true"></i>'.getPhrase("edit_details").'</a></li>
<li><a href="javascript:void(0);" onclick="changeStatus(\''.$records->slug.'\',\''.$records->status.'\',\''.$records->user_id.'\');" ><i class="fa fa-star" aria-hidden="true"></i>'.$status_name.'</a></li>';
}
$temp='';
//Show delete option to only the owner user
if(checkRole(getUserGrade(1)) && $records->id!=\Auth::user()->id) {
$temp = '<li><a href="javascript:void(0);" onclick="deleteRecord(\''.$records->slug.'\');"><i class="fa fa-trash"></i>'. getPhrase("delete").'</a></li>';
}
$temp .='</ul> </div>';
$link_data .= $temp;
return $link_data;
})
->editColumn('name', function($records) {
$role = getRoleData($records->role_id);
if($role =='student')
return '<img src="'.IMAGE_STUDENT_ICON.'" title="'.getPhrase('student').'" > <a href="'.URL_USER_DETAILS.$records->slug.'">'.ucfirst($records->name).'</a>';
else if($role=='staff')
{
return '<img src="'.IMAGE_TEACHER_ICON.'" title="'.getPhrase('teacher').'" > <a href="'.URL_STAFF_DETAILS.$records->slug.'">'.ucfirst($records->name).'</a>';
}
else if($role=='admin' || $role=='owner')
{
return '<img src="'.IMAGE_ADMIN_ICON.'" title="'.getPhrase('admin').'" > '.ucfirst($records->name);
}
return ucfirst($records->name);
})
->editColumn('image', function($records){
return '<img src="'.getProfilePath($records->image).'" />';
})
->editColumn('current_year',function($records){
if($records->course_dueration>1){
if($records->current_year==-1 && $records->current_semister==-1){
return 'Completed';
}
if($records->is_having_semister==0){
return $records->current_year;
}
$data = '';
$data=$records->current_year.' '.'-'.' '.$records->current_semister;
Request::CheckUserSession();
return $data;
}
elseif ($records->course_dueration<=1 && $records->current_year==-1 && $records->current_semister==-1) {
return 'Completed';
}
return '-';
})
->removeColumn('login_enabled')
->removeColumn('role_id')
->removeColumn('role_name')
->removeColumn('current_semister')
->removeColumn('id')
->removeColumn('slug')
->removeColumn('updated_at')
->removeColumn('course_dueration')
->removeColumn('is_having_semister')
->removeColumn('status')
->removeColumn('user_id')
->make();
}
，该参数需要一个布尔值。
为false时，它阻止Three.js画布更新DOM元素样式。 JSFiddle
答案 1 :(得分：1)
是的。将“ false”作为第三个参数传递给renderer.setSize（）。